# 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.
A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/throughline-hero).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/throughline-hero
- Screenshot: https://shadcn.exchange/shot/keyframeui/throughline-hero/light.png
- Registry item: https://keyframeui.com/r/throughline-hero.json
- Categories: blocks, hero-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/throughline-hero.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- Registry items: `https://keyframeui.com/r/echo-reel.json`, `https://keyframeui.com/r/throughline.json`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/hero-sections/throughline-hero
## Files
### `registry/blocks/throughline-hero.tsx`
```tsx
"use client";
import * as React from "react";
import { EchoReel } from "@/components/ui/echo-reel";
import { Throughline, type ThroughlineItem, type ThroughlineLine } from "@/components/ui/throughline";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the hero yours: the palette,
* the nav, the words on the reel, the tiles and the copy. The
* reel turns through what Loupe shoots; the tiles riding
* through it are what it hands back. The button in the corner
* stops both for visitors who want the page still.
* ─────────────────────────────────────────────────────────── */
/** Crisp white or deep night, one electric violet, and a few loud tile colors. */
const PALETTE = {
light: { paper: "#ffffff", ink: "#0b0b10", accent: "#5b2bff" },
dark: { paper: "#07070c", ink: "#f5f5f7", accent: "#9b83ff" },
};
const BRAND = { name: "Loupe", href: "#" };
const NAV_LINKS = [
{ label: "Product", href: "#product" },
{ label: "Examples", href: "#examples" },
{ label: "Pricing", href: "#pricing" },
{ label: "Changelog", href: "#changelog" },
];
const SIGN_IN = { label: "Sign in", href: "#sign-in" };
const NAV_CTA = { label: "Try it free", href: "#start" };
/** Read as one sentence by screen readers; shown as a line over the reel. */
const LEAD = "Studio product photos for";
const WORDS = ["Sneakers", "Skincare", "Ceramics", "Candles", "Jewelry"];
const SUBLINE =
"Upload one phone shot. Loupe cuts it out, lights it and hands back every size your shop needs, in under a minute.";
const PRIMARY_CTA = { label: "Shoot 20 photos free", href: "#start" };
const SECONDARY_CTA = { label: "See before and after", href: "#examples" };
/** What Loupe hands back. Each rides one of the lines; hold one to read it. */
const TILES: { label: string; line: number; bg: string; glyph: React.ReactNode }[] = [
{
label: "Cutout · background gone in 2s",
line: 0,
bg: "#c6ff3d",
glyph: (
<>
),
},
{
label: "Shadow · soft, from the light you pick",
line: 1,
bg: "#0b0b10",
glyph: (
<>
),
},
{
label: "Variants · 12 colorways from one shot",
line: 2,
bg: "linear-gradient(135deg,#ff4fa3,#ff7a1a)",
glyph: (
<>
),
},
{
label: "Upscale · 4K, sharp enough for print",
line: 0,
bg: "#ffffff",
glyph: ,
},
{
label: "Alt text · written in 9 languages",
line: 1,
bg: "#ff5a1f",
glyph: ,
},
{
label: "Sizes · every marketplace crop",
line: 2,
bg: "#5b2bff",
glyph: ,
},
{
label: "Scene · a lifestyle backdrop, lit to match",
line: 0,
bg: "#1d9bff",
glyph: (
<>
),
},
{
label: "Retouch · dust, glare and creases",
line: 1,
bg: "#0b0b10",
glyph: ,
},
];
/** Two lines across the reel and one behind it, in % of the reel's box. */
const LINES: ThroughlineLine[] = [
{ from: [4, 14], to: [96, 78], bend: 0.1 },
{ from: [3, 88], to: [97, 10], bend: -0.08 },
{ from: [1, 50], to: [99, 42], bend: 0.2, behind: true },
];
/* ── Section ─────────────────────────────────────────────── */
const ITEMS: ThroughlineItem[] = TILES.map((tile) => ({
label: tile.label,
line: tile.line,
icon: (
),
}));
export function ThroughlineHero() {
const [still, setStill] = React.useState(false);
return (
{BRAND.name}
);
}
/* ── Mark ────────────────────────────────────────────────── */
/** A loupe: a lens ring with the accent catching the light. */
function LoupeMark({ className }: { className?: string }) {
return (
);
}
```