Wobble Strips
Wide colored text strips that reveal sequentially on scroll and add a playful wobble when hovered.
A scroll-pinned animation where each strip of text “opens” from the center outward as you scroll, stacking into view. Once all strips are revealed, hovering the pointer adds a subtle wobble and tilt effect.
Behavior
- Scroll reveal — strips clip open one after another while the stage is pinned.
- Sequential timeline — each strip occupies a scroll window
[i..i+1]. - Wobble on hover — after all strips are visible, pointer movement nudges and rotates them.
- Depth & style — soft shadows, sheen, and grain give a tactile poster feel.
Props
stripData?: StripDef[]— array of strips (text, bg color, rotation, positioning, z-index).sectionClassName?: string— extra classes for the outer<section>.scrollContainerRef?: React.RefObject<HTMLElement | null>— optional scroll container for nested previews/modals.
StripDef shape
text: string— label inside the strip.bg: string— background color (hex/css).rotateClass: string— Tailwind rotation utility (e.g.-rotate-4).topClass: string— Tailwind top positioning utility.rightClass: string— Tailwind right positioning utility.z: number— paint order; higher means drawn above others.
Scroll down to view the strips
WAIT A SEC
WAAAIIIITTTTT
HERE WE GO
Scroll up
This component use a subtle noise texture for depth and realism.
To make it render correctly, you need to download and place the following image into your project’s public/ folder with the exact filename noise.webp.
💡 Why?
This texture is layered via CSS (backgroundImage: url(/noise.webp)) in this component to create a film-grain style background. Without it, you’ll see missing backgrounds or fallback colors instead.
Strip Gallery
A horizontally expanding image-strip slider where one strip is active at a time. Supports optional titles, descriptions, and CTA links. Control sizing and behavior with props like expandedPx, collapsedPx, gapPx, heightPx, expandOnHover, and autoExpand.
3D Image Slider
A 3D stacked image carousel with directional navigation—on NEXT the active card falls away and the next rises; on PREV the active card is pushed back in depth to reveal the previous. Background color adapts per slide.