Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
floating-items-reveal-demo
Slow broths, cured cuts and a glass kept cold for you
Stocks Simmered Daily
Walk-ins Welcome
import { FloatingItemsReveal } from "@/registry/tween/floating-items-reveal"
export function FloatingItemsRevealDemo() {
return <FloatingItemsReveal />
}
Installation
Usage
import { FloatingItemsReveal } from "@/components/ui/floating-items-reveal"<FloatingItemsReveal
items={["/plate-1.jpg", "/plate-2.jpg", "/plate-3.jpg", "/plate-4.jpg"]}
heroImage="/hero-plate.png"
heading="Slow broths, cured cuts and a glass kept cold for you"
/>One GSAP timeline plays on mount:
- Four full-size layers open one after another with
clip-path: circle()from the centre, each in a new colour. - The four items scale up from the centre and fly to tilted positions around the container, each starting an endless
sine.inOutbob on its image while the logo fades in. - After a beat the bobbing stops and the items fly 3.5x further out with extra spin and scale, while the logo shoots upward.
- The nav logo pops in, nav words slide up through masks, the headline characters spring in with
elastic.out, the footer lines rise, and the hero disc scales up as the image slides up behind the headline.
Item positions are fractions of the container size, so it fits any preview or section. The Replay button remounts the stage and plays the timeline again. When prefers-reduced-motion: reduce is set the preloader is skipped and the hero renders in its final state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | string[] | 4 dark-table shots | Images that fly out, bob and exit. Four positions are used. |
heroImage | string | round plated dish | Image that rises over the disc at the bottom. |
logo | string | inline SVG mark | Logo shown in the preloader and the nav. |
navLinks | string[] | 6 links | Nav labels. |
heading | string | Embrook headline | Headline split into characters. |
footerLeft | string | "Stocks Simmered Daily" | Bottom-left line. |
footerRight | string | "Walk-ins Welcome" | Bottom-right line. |
revealColors | string[] | 4 ember tones | Colours of the circle-clip layers, in order. |
accent | string | "#c4451c" | Colour of the disc behind the hero image. |
background | string | "#120d0a" | Page background. |
foreground | string | "#f2e3c9" | Text colour. |
showReplay | boolean | true | Show the replay button. |
className | string | — | Extra classes on the outer container. |