Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
accordion-image-frames-demo
import { AccordionImageFrames } from "@/registry/tween/accordion-image-frames"
export function AccordionImageFramesDemo() {
return (
<div className="w-full">
<AccordionImageFrames />
</div>
)
}
Installation
Usage
import { AccordionImageFrames } from "@/components/ui/accordion-image-frames"<AccordionImageFrames
images={[
"https://images.unsplash.com/photo-1523516118247-bd68d99e83c2?q=80&w=800&h=800&fit=crop&crop=center&auto=format",
"https://images.unsplash.com/photo-1643925690746-9eb744dae41b?q=80&w=800&h=800&fit=crop&crop=center&auto=format",
]}
panelCount={16}
expandedWidth={360}
/>How it works
- Every panel is absolutely positioned on the track. Its
leftandwidthare computed in render: the focused panel getsexpandedWidth, every other panelcollapsedWidth, withgapbetween them, and the whole row is centred in the track. - Hovering a panel focuses it. Both properties then change at once and a CSS transition (
1s cubic-bezier(0.075, 0.82, 0.165, 1)) springs every panel to its new spot. - Each image is a fixed 400px wide and centred inside its panel, so a collapsed panel shows a thin slice of the middle of the photo rather than a squashed one.
- The focus frame uses the same position as the focused panel and the same transition, with guide lines running up and down to the edges.
- Images repeat when there are more panels than images. Below a 1000px container width the track switches to 10 smaller panels that focus on tap.
- With
prefers-reduced-motion: reducethe panels snap without transitioning.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | string[] | 12 dune photos | Images cycled across the panels. |
panelCount | number | 20 | Panels above the 1000px container breakpoint. |
panelCountMobile | number | 10 | Panels below the breakpoint. |
collapsedWidth | number | 20 | Collapsed panel width in px. |
expandedWidth | number | 400 | Focused panel width in px. |
expandedWidthMobile | number | 100 | Focused panel width in px below the breakpoint. |
gap | number | 5 | Gap between panels in px. |
background | string | "#120e0a" | Section background. |
frameColor | string | "#f3e4c8" | Focus frame and guide-line color. |
className | string | — | Extra classes on the section. |