Vibary.ai
Go Pro
← Vibe Coding

Fullscreen Toggle

A panel expands to fill the frame while surrounding chrome fades.

navigationpremiumfuturisticinteraction · finite · intermediate · ~0.5s
Interactive · click to play
Variant

The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.

354 lines · react + motion only
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

/**
 * Vibary · Fullscreen Toggle
 *
 * One panel takes over the frame. Rather than opening a second copy of
 * the panel in a dialog, the panel itself is measured in both places and

About this pattern

The move behind focus modes, expandable dashboard tiles and media players. There is no second copy of the panel in an overlay: the same element switches from a tile in the flow to an absolutely positioned surface at inset zero, and a layout animation measures both boxes and travels between them. Everything else is timing discipline — the chrome around it only changes opacity so nothing reflows behind the motion, an opaque ground fades in so the panel never shows the chrome through itself on the way back, and the extra detail that earns its place at full size waits until the panel has landed. The heading rides on layout="position" at a constant font size, so no glyph is ever scaled by the reflow.

Expandable dashboard tileMedia playerFocus mode in an editorReport or chart detail

Where it shows up

Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.

  • OverviewLast 30 days
    Revenue$48,210+12.4%
    Orders1,284+3.1%
    Refunds$1,940−0.8%
    Revenue by day
    Dashboard

    A single tile expands over the board while the rest of the dashboard recedes.

Related patterns