# Throughline Feature
> A feature section for an AI product-photo studio: one product shot in the middle of a stage, and every crop and format it becomes riding out from under it along five dotted spokes (marketplace square, feed, story, banner, alt text, WebP). Copy and three numbers sit beside it. Hold a tile to stop its spoke and read it.
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-feature).
- Page, with a live preview: https://shadcn.exchange/r/keyframeui/throughline-feature
- Screenshot: https://shadcn.exchange/shot/keyframeui/throughline-feature/light.png
- Registry item: https://keyframeui.com/r/throughline-feature.json
- Categories: blocks, feature-sections
- Listed: 2026-11-02, source last changed 2026-11-02
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/throughline-feature.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/throughline.json`
## Notes from the registry
Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/throughline-feature
## Files
### `registry/blocks/throughline-feature.tsx`
```tsx
"use client";
import * as React from "react";
import { Throughline, type ThroughlineItem, type ThroughlineLine } from "@/components/ui/throughline";
/* ── Content ─────────────────────────────────────────────────
* Everything you'd change to make the section yours: the
* palette, the copy, the product shot and the formats. Every
* line starts under the shot, so each format slides out from
* behind it and rides off to its station.
* ─────────────────────────────────────────────────────────── */
const PALETTE = {
light: { paper: "#ffffff", ink: "#0b0b10", accent: "#5b2bff", stage: "#f4f2fb" },
dark: { paper: "#07070c", ink: "#f5f5f7", accent: "#9b83ff", stage: "#0f0e16" },
};
const EYEBROW = "Every crop";
const HEADLINE = "One shot in. Every size your store needs out.";
const BODY =
"Loupe reframes the same photo for each place it's going, keeps the product centered and the shadow where the light says it falls, and writes the alt text while it's there.";
const STATS = [
{ value: "38", label: "crops and formats from one upload" },
{ value: "84 KB", label: "average listing image, WebP" },
{ value: "9", label: "languages of alt text" },
];
const LINK = { label: "See every format", href: "#formats" };
const SHOT = {
src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=720&h=720&q=80",
alt: "Over-ear headphones on a yellow backdrop",
caption: "studio-headphones.jpg",
};
/** An aspect-ratio frame: the format itself, drawn to scale. */
function Frame({ w, h }: { w: number; h: number }) {
const s = 16 / Math.max(w, h);
return (
);
}
const FORMATS: ThroughlineItem[] = [
{ label: "1:1 · Marketplace listing", line: 0, icon: },
{ label: "4:5 · Feed post", line: 1, icon: },
{ label: "9:16 · Stories and Reels", line: 2, icon: },
{ label: "16:9 · Site banner", line: 3, icon: },
{ label: "3:4 · Lookbook page", line: 4, icon: },
{
label: "Alt text · “Black over-ear headphones…”",
line: 0,
icon: (
),
},
{
label: "WebP · 84 KB, 2400px",
line: 2,
icon: (
),
},
{
label: "2:3 · Pinterest pin",
line: 1,
icon: ,
},
{
label: "Shadow · soft, light from 30° left",
line: 3,
icon: (
),
},
{
label: "Cutout · PNG with transparency",
line: 4,
icon: (
),
},
];
/** Five spokes out from under the shot at [50, 50]. */
const LINES: ThroughlineLine[] = [
{ from: [50, 50], to: [8, 6], bend: 0.1, behind: true },
{ from: [50, 50], to: [94, 8], bend: -0.12, behind: true },
{ from: [50, 50], to: [98, 54], bend: 0.08, behind: true },
{ from: [50, 50], to: [90, 96], bend: 0.12, behind: true },
{ from: [50, 50], to: [6, 90], bend: -0.1, behind: true },
];
/* ── Section ─────────────────────────────────────────────── */
export function ThroughlineFeature() {
return (