Kinetic Stream
Interactive typography testimonial with expanding word context.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| words | Array<{text: string, video: string, quote: string}> | [{text: 'Fast.', video: '...', quote: '...'}, ...] | Array of word objects — each word expands on hover to reveal a video and quote. |
| backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
When to Use
Ideal for product feature showcases, Uilora brand storytelling pages, and editorial-style landing pages. Each word becomes a portal into a specific benefit or customer story.
Best Practices
Keep words to single impactful adjectives or short phrases (Fast., Beautiful., Reliable.). Use short looping videos for each word — 5–10 seconds works best. The contrast between minimal text and rich video creates the tension that drives engagement.
Why This Component Matters
Kinetic typography transforms passive reading into active discovery. When hovering a word reveals the human story behind it, the testimonial feels earned rather than placed.
FAQ
QHow does the hover expansion work?
Each word is a motion element that expands its width and height on hover, revealing a video and quote via AnimatePresence. The layout shift is handled by Framer Motion's layout prop.
QHow many words should I use?
3–5 words is the sweet spot. Each word should represent a distinct product dimension — speed, design, support, etc.
QIs it mobile responsive?
On mobile, words expand on tap. The video preview scales to fill the expanded word card without overflow.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.