KeyframeUI

Throughline Hero

A hero for an AI product-photo studio, built on one giant word. An Echo Reel turns through what it shoots (sneakers, skincare, ceramics), each word inking in as it rolls into the middle, while Throughline tiles of what it hands back ride dotted lines across the reel and pick up the violet through their glass. Hold a tile to stop its line and read it; a button in the corner stops all the motion.

Hero Section

Built with Echo Reel and Throughline

Uses clsx, tailwind-merge

Inspired by Cloudflare for Startups

Open in ChatGPTOpen in Claude

Installation

The CLI writes components/throughline-hero.tsx, the components it's built with (components/ui/echo-reel.tsx and components/ui/throughline.tsx) and lib/utils.ts, and installs clsx and tailwind-merge. It needs the @keyframeui registry in components.json; add it once per project.

npx shadcn@latest add @keyframeui/throughline-hero

Then put it where the section goes. The copy, links and data sit in constants at the top of the file, so making it yours starts there.

app/page.tsx
import { ThroughlineHero } from "@/components/throughline-hero";

export default function Page() {
  return <ThroughlineHero />;
}

Built with

Each of these is a component on its own, with its own examples and props. The block installs them for you.