--- title: Text to Timeline description: Images inside a sentence fly out on scroll and land on an editor timeline. category: Scroll tier: pro url: https://ui.dimaac.com/components/text-to-timeline registry: https://api.dimaac.com/v1/ui/r/text-to-timeline.json registry_auth: Authorization: Bearer --- # Text to Timeline A big sentence with small rounded images sitting between its words. The words glow in one by one, then, as you scroll, every image leaves its slot, tilts in flight and lands in its clip on an editor-like timeline while a playhead runs along the ruler and the timecode counts up. Write the sentence with {media} tokens where the images go. Each image really lives in the timeline and is only started at its slot, so the layout stays plain HTML: no clones, no pinning. One scrubbed GSAP timeline, re-measured on resize and when the font arrives. It takes a scroller (an element or a selector) for scrolling boxes, and when the visitor prefers reduced motion the images simply sit in both the sentence and the timeline, still. ## Install This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable. 1. Merge the registry into components.json (the key is never written into the file): ```json { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } ``` 2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set: ```bash DIMAAC_LICENSE_KEY=your-licence-key ``` 3. Add the component: ```bash npx shadcn@latest add @dimaac-pro/text-to-timeline ``` The registry item is https://api.dimaac.com/v1/ui/r/text-to-timeline.json and answers only with `Authorization: Bearer ` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing). Dependencies: ```bash pnpm add gsap @gsap/react npm install gsap @gsap/react ``` By hand: Unlock the code on https://ui.dimaac.com/components/text-to-timeline with your licence key, then: 1. Install the packages it uses: gsap, @gsap/react. 2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/text-to-timeline.tsx. 3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS. 4. Import it with import { TextToTimeline } from "@/components/dimaac/text-to-timeline" and give its parent a size: it fills it. ## Usage ```tsx import { TextToTimeline } from "@/components/dimaac/text-to-timeline"; ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `sentence` | `string` | `"DiMaac {media} turns words into motion: {media} scroll, and the pictures {media} fly out, tilt {media} and land {media} right on the timeline."` | The sentence. Each {media} token becomes a slot for the next image in media. | | `media` (required) | `TextToTimelineMedia[]` | - | The images, in slot order. Extra images sit in the timeline without a slot. | | `tilt` | `number` | `12` | How far an image tilts at the middle of its flight, in degrees. Neighbours tilt opposite ways. | | `scrub` | `number` | `1` | How many seconds the images take to catch up with the scrollbar. 0 ties them to it exactly. | | `wordStagger` | `number` | `0.06` | Delay between one word glowing in and the next, in seconds. | | `glowHue` | `number` | `180` | Hue of the first word's glow (0-360). Each word after it shifts the hue a little. Also tints the playhead. | | `scroller` | `HTMLElement \| string \| null` | `null` | The element that scrolls, or a selector for it. Leave empty for the page itself. | | `as` | `"h1" \| "h2" \| "p"` | - | The tag the sentence is written in. | | `className` | `string` | `""` | Extra classes for the outer box. | ## Credits - Abstract Wavy Design: rena, Lummi (https://www.lummi.ai/photo/abstract-wavy-design-bypvi), Lummi License - Portrait with Neon Sunglasses: Shaun Duval, Lummi (https://www.lummi.ai/photo/portrait-with-neon-sunglasses-gindg), Lummi License - Portrait Through Orange Frame: Bernardo Lickfold, Lummi (https://www.lummi.ai/photo/portrait-through-orange-frame-kld5i), Lummi License - Vibrant Cylindrical Arrangement: SHIHO, Lummi (https://www.lummi.ai/photo/vibrant-cylindrical-arrangement-pj9pp), Lummi License - Cinematic Silhouette: alexaperios, Lummi (https://www.lummi.ai/photo/cinematic-silhouette-uqi2l), Lummi License ## Source The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/text-to-timeline. ## Agent prompt ```text Add the Text to Timeline component () from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access). Docs: https://ui.dimaac.com/components/text-to-timeline 1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file: { "registries": { "@dimaac-pro": { "url": "https://api.dimaac.com/v1/ui/r/{name}.json", "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" } } } } 2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key Ask them for it if it isn't set. Never print it or commit it. 3. Install it with: npx shadcn@latest add @dimaac-pro/text-to-timeline The registry item is https://api.dimaac.com/v1/ui/r/text-to-timeline.json and wants the header "Authorization: Bearer ". Then use it like this: import { TextToTimeline } from "@/components/dimaac/text-to-timeline"; It imports gsap, @gsap/react; the CLI installs them. It uses Tailwind v4 classes, so make sure Tailwind scans that folder. Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback. Full index for agents: https://ui.dimaac.com/llms.txt ```