Expanding Frame
Built around the light.
A two-line headline parts to the left and right while a small rounded photograph between the lines grows to fill the stage, its corners easing square and the picture settling from a close zoom to its full view. Progress can come from a number or a live scroll value, or the frame opens and closes on its own. An overlay passed as children settles in once the photograph is full. Lines, photograph, starting width, corner radius, zoom and pace are all props. Reduced motion shows the full photograph.
The import and the props worth knowing about, in one place.
import { ExpandingFrame } from "@/components/beste/component/expanding-frame";
<ExpandingFrame
className="h-[36rem] bg-background text-foreground"
lines={["Built around", "the light."]}
imageSrc="https://images.unsplash.com/photo-1518005020951-eccb494ad742?w=2000&q=80"
imageAlt="Curved white bands of a building around an opening of blue sky"
/>
// Driven by scroll: pass a framer-motion MotionValue (or any { get() }) as progress
const { scrollYProgress } = useScroll({ target: ref });
<ExpandingFrame progress={scrollYProgress} autoplay={false} startWidth={0.24} radius={32} />Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
lines | [string, string] | — | The two headline lines: the first slides away to the left, the second to the right. |
as | "h1" | "h2" | "h3" | "p" | "div" | — | Element the headline renders as for screen readers. |
imageSrc | string | — | The photograph inside the frame. |
imageAlt | string | — | Description of the photograph for screen readers. |
startWidth | number | — | Starting width of the frame as a share of the stage width, 0.15 to 0.6. |
radius | number | — | Starting corner radius of the frame in pixels; it eases to square as the frame fills the stage. |
zoom | number | — | How far the photograph is zoomed in while the frame is small; it settles to 1 when full. |
progress | number | ExpandingFrameProgressSource | — | From small frame (0) to full bleed (1): a number or a live source such as a scroll MotionValue. |
autoplay | boolean | — | Open and close on its own. Defaults to on when no progress is given. |
speed | number | — | Pace of the autoplay loop. |
paused | boolean | — | Hold the frame where it is. |
lineClassName | string | — | Font and size of the headline lines, as Tailwind classes. |
className | string | — | |
children | ReactNode | — | Overlay that settles in once the photograph fills the stage. |
