# 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 Feature Section block from KeyframeUI: a whole landing-page section built around the Throughline component, free to install as source with the shadcn CLI. Built with React and Tailwind CSS.
- Live preview: https://keyframeui.com/blocks/feature-sections/throughline-feature
- Category: Feature Sections
- Built with: [Throughline](https://keyframeui.com/components/throughline.md)
- npm dependencies: clsx, tailwind-merge
## Installation
Register the @keyframeui registry in `components.json` once per project:
```json
{
"registries": {
"@keyframeui": "https://keyframeui.com/r/{name}.json"
}
}
```
Then add the block. It lands in `components/throughline-feature.tsx`, and the CLI also adds the components it's built with (`components/ui/throughline.tsx`) and `lib/utils.ts`, and installs the npm dependencies:
```bash
npx shadcn@latest add @keyframeui/throughline-feature
```
Or install by URL, without registering the namespace:
```bash
npx shadcn@latest add https://keyframeui.com/r/throughline-feature.json
```
## Usage
Put it where the section goes. The copy, links and data sit in constants at the top of the file; edit them there.
```tsx
import { ThroughlineFeature } from "@/components/throughline-feature";
export default function Page() {
return ;
}
```
## Source
```tsx title="components/throughline-feature.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 (