Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
inline-icon-text-scroll-demo
Sketch the idea before it fades. Set the type and lock the grid, then ship it from one studio.
Open beta, Monday
import { InlineIconTextScroll } from "@/registry/tween/inline-icon-text-scroll"
export function InlineIconTextScrollDemo() {
return <InlineIconTextScroll />
}
Installation
Usage
import { InlineIconTextScroll } from "@/components/ui/inline-icon-text-scroll"<InlineIconTextScroll
title="Orrery"
icons={["/icons/orbit.svg", "/icons/sketch.svg", "/icons/ship.svg"]}
parts={[null, "Sketch it,", null, "shape it,", null, "ship it."]}
/>How it works
The hero pins for pinDistanceFactor viewport heights and one scrubbed ScrollTrigger drives four phases:
- 0 – 30%: the header lifts and fades while the icon row rises with a per-icon stagger.
- 30 – 60%: the row slides to the center and scales down to the placeholder size; the background flips from dark to light halfway through.
- 60 – 75%: copies of each icon travel vertically, then horizontally, into the inline placeholders in the paragraph.
- 75 – 100%: the text segments fade in one by one in a random order.
The trigger resolves its scroller with usePreviewScroller, and positions are measured relative to the pinned section, so nothing depends on window scroll. With prefers-reduced-motion: reduce the final state is shown.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | "Orrery" | Header title. |
subtitle | ReactNode | default copy | Header subtitle. |
icons | string[] | 5 SVG icons | Icon images. Icon i flies into placeholder i. |
parts | (string | null)[] | default paragraph | Paragraph parts; null marks an inline icon placeholder. |
outro | ReactNode | "Open beta, Monday" | Text of the section after the pin. |
pinDistanceFactor | number | 8 | Pin length in viewport heights. |
dark | string | "#16130f" | Initial background and paragraph text color. |
light | string | "#ece5d8" | Final background and header text color. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller; defaults to the preview one. |
className | string | — | Extra classes on the outer container. |