Animated Hero Sections & Scroll Effects - Sharingan

Authorrasengan-dev

Last UpdateNovember 3, 2026

LicenseMIT

Features

Pointer tracking and tilt effects on supported heroes.
Keyboard and physical gamepad navigation in the Gamepad hero.
Color palettes that accept CSS variables and follow theme changes.
Optional still posters for WebGPU effects when animation is unavailable.
Reduced-motion handling and animation pausing outside the viewport.
Scroll-driven cards, galleries, and text reveals for sections below the hero.

How to Use Sharingan

Installation

Use a shadcn-configured project with components.json and the @/ path alias. Add the Sharingan registry entry to your existing components.json:

{
  "registries": {
    "@sharingan": "https://sharingan.hiraiship.app/r/{name}.json"
  }
}

Install Conic Rays, a DOM hero with rotating light rays. Its files go to components/heroes/conic-rays/ and its shared runtime to lib/sharingan/.

npx shadcn@latest add @sharingan/conic-rays

Basic Usage: React Hero

Sharingan’s React components require React 19. Import the installed Conic Rays hero and set its text and animation options:

import { ConicRaysHero } from "@/components/heroes/conic-rays/conic-rays";
export default function LandingPage() {
  return (
    <ConicRaysHero
      content={{
        headline: "Create your next project today",
        subheadline: "A practical toolkit for your product team.",
        primaryCta: { label: "Get started", href: "/signup" },
      }}
      config={{
        colors: ["#0ea5e9", "#f97316"],
        rays: 12,
        speed: 0.8,
        origin: "top",
      }}
    />
  );
}

Add a WebGPU Hero

Install Ink Flow for an animated, pointer-responsive ink background:

npx shadcn@latest add @sharingan/ink-flow

import { InkFlowHero } from "@/components/heroes/ink-flow/ink-flow";
export default function InkLandingPage() {
  return (
    <InkFlowHero
      content={{
        headline: "Turn your ideas into working products",
        primaryCta: { label: "Start building", href: "/start" },
      }}
      config={{
        colors: ["#2563eb", "#fb7185"],
        swirl: 26,
        detail: "low",
      }}
    />
  );
}

Use a Web Component

For the Web Component API, register each custom element once before adding its tag.

<script type="module">
  import { defineInkFlowElement } from "@/components/heroes/ink-flow/ink-flow.element";
  defineInkFlowElement();
</script>
<sg-ink-flow colors="#2563eb, #fb7185" swirl="26" detail="low">
  <h1>Turn your ideas into working products</h1>
  <a href="/start">Start building</a>
</sg-ink-flow>

Available Hero Designs

The hero collection has six WebGPU effects and 12 DOM designs.

Hero	Main effect
`aurora-mesh`	Slow drifting bands of light.
`ink-flow`	Cursor-responsive fluid ink.
`particle-type`	Headline particles scatter and reform.
`gravity-field`	Particles respond to pointer attraction.
`reaction-diffusion`	Growing procedural patterns.
`liquid-glass`	Refractive glass over a product image.
`gamepad`	Interactive controller navigates content panels.
`holo-card`	Tilting, flipping holographic card.
`split-headline`	Animated letters with pointer reactions.
`marquee-type`	Large moving rows of typography.
`terminal-boot`	Typed command and product reveal.
`app-window`	Product UI assembles panel by panel.
`beam-grid`	Light beams move across a grid.
`conic-rays`	Rotating light rays behind the heading.
`gallery-fan`	Artwork cards open into a fan.
`trail-map`	Animated route over a landscape image.
`curve-reel`	Project cards rotate along a curved wall.
`bento-tiles`	Raised tiles and animated bento cards.

Shared React API

Hero and section React components accept these outer props. Each component has its own content and config schema.

Prop	Description
`content`	Optional, typed object containing the hero’s headline, links, and any component-specific data. Omitting it uses the component’s example content.
`config`	Optional, typed object controlling colors, motion, and interaction. Each component defines its accepted values in a Zod schema.
`id`	Optional HTML ID applied to the hero or section.
`className`	Optional additional class for the root element.

Hero Content Reference

Hero	Additional public `content` fields
`aurora-mesh`, `ink-flow`, `particle-type`, `gravity-field`, `reaction-diffusion`, `split-headline`, `beam-grid`, `conic-rays`	The common headline, eyebrow, subheadline, and CTA fields only.
`liquid-glass`	Required: `media: {src, alt}` for the product image and its text description.
`gamepad`	Required: `sections` (1 to 4 objects with `label`, `title`, optional `body`, `items` (up to 5 strings), and `quote: {text, cite}`). Optional: `wordmark: {title, tagline?}` (defaults to the supplied SG·PAD label); `collaborators` (up to 2 names).
`holo-card`	Required: `card: {issuer, name, role?, detail?, number?}`. Optional: `back: {title, items?, link?}`; `items` accepts up to 4 strings and `link` is a CTA object.
`marquee-type`	Required: `rows`, an array of 2 to 4 rows, each containing 3 to 10 strings. Optional: `rowsLabel` for the list’s accessible label.
`terminal-boot`	Required: `terminal: {command, output, title?, done?}`. `output` contains 1 to 8 objects with `text` and optional `status` (`ok`, `info`, `warn`, `muted`; default `ok`). `title` defaults to `~/projects`. Optional: `media: {src, alt, address?}`.
`app-window`	Required: `app: {label, name, nav, title, stats, chart, columns, rows}`. `nav` has 2 to 6 strings; `stats` has 2 to 4 `{label, value, delta?}` items; `chart: {label, points}` has 6 to 32 numeric points; `columns` has 2 to 5 strings; `rows` has 2 to 5 `{cells, status?}` items. Each row has 2 to 5 cells; status defaults to `neutral` and accepts `ok`, `warn`, `error`, `neutral`.
`gallery-fan`	Required: `artworks` (3 to 9 `{src, alt, title, artist, href?}` objects). Optional: `collaborators` (up to 2 `{name, card?}` objects; `card` is a zero-based artwork index).
`trail-map`	Required: `photo: {src, alt}` and `trail: {points, stops?, label?, distance, description}`. `points` has 2 to 24 `[x, y]` coordinates in percentages from 0 to 100; `stops` is up to 8 point indices (default `[]`); `label` defaults to `Trekking distance`. Optional: `explorers: {count, label, initials?}` and `destinations` (up to 8 `{src, alt, name, duration, rating, reviews, href?}` objects).
`curve-reel`	Required: `projects`, an array of 4 to 16 `{src, alt, title, href?}` cards. Optional: `cta` and `steps`, up to 5 `{label, card?}` objects with zero-based card indices.
`bento-tiles`	Required: `headline`, `integrations: {title, description, apps}`, `stat: {value, label}`, `portrait: {src, alt, focus?}`, `highlight: {value, label}`, `folder: {label}`, and `orbit: {title, people}`. `apps` has 1 to 4 `{name, icon}` items; `focus` is an optional percentage pair `[x, y]`; `people` has 1 to 6 `{src, alt}` images. Optional: `nav: {brand, links, cta?}` (up to 5 `{label, href}` links), `subheadline`, and `cta`.

Web Component API

Each installed component includes a define<ComponentName>Element() function in <component-slug>.element.ts. Calling it registers the corresponding <sg-component-slug> tag.

For example, defineInkFlowElement() registers <sg-ink-flow>, and defineCardJourneyElement() registers <sg-card-journey>. You can pass a custom tag name to these definition functions.

The Web Component attributes mirror the component’s config fields: inkFade becomes ink-fade, countUp becomes count-up, accentAlt becomes accent-alt, and easterEgg becomes easter-egg.

Color arrays such as colors and gradient use comma-separated CSS color values. Set a boolean attribute to "false" to turn it off; omitted attributes take the schema defaults from the configuration tables.

The Ink Flow element above reads its headline and links from HTML children. DOM heroes and scroll sections use the following structural markup in their Web Component form.

Element	Required internal markup
`<sg-gamepad>`	A `data-sg-slide="home"` panel and up to four `data-sg-slide` panels with `data-label`; `data-wordmark` and `data-collaborators` provide optional text.
`<sg-holo-card>`	A `data-sg-card` element containing `data-sg-front`; `data-sg-back` is optional.
`<sg-split-headline>`	Mark the heading with `data-sg-split` and the content following it with `data-sg-after`.
`<sg-marquee-type>`	A `data-sg-rows` wrapper with `data-sg-row` children, each containing a list of words.
`<sg-terminal-boot>`	`data-sg-command`, `data-sg-line` rows with `data-sg-icon`, and `data-sg-actions`; optional `data-sg-done` and `data-sg-product`.
`<sg-app-window>`	A `data-sg-window` containing `data-sg-panel` parts; the chart uses `data-sg-chart` with `data-points`.
`<sg-beam-grid>`, `<sg-conic-rays>`	HTML heading and link content as children; their effects are generated behind it.
`<sg-gallery-fan>`	`data-sg-fan` containing a `data-sg-card` for each image; `data-sg-cursor` is optional.
`<sg-trail-map>`	`data-sg-visual` containing `data-sg-frame` with `data-trail` route data, surrounding a `data-sg-scene` with the image.
`<sg-curve-reel>`	`data-sg-reel` with `data-sg-card` items and optional `data-sg-step` elements.
`<sg-bento-tiles>`	`data-sg-bento` containing six `data-sg-card` items; optional `data-sg-nav`.
`<sg-card-journey>`	`data-sg-statement` and `data-sg-grid` with `data-sg-copy` and `data-sg-panel` containing `data-sg-card` items; optional `data-sg-aside` and `data-sg-tab`.
`<sg-pinned-reveal>`	`data-sg-headline` and `data-sg-frame` with the image; optional `data-sg-head` and `data-sg-caption`.
`<sg-scroll-read>`	A `data-sg-read` paragraph with inline `<img>` elements at the appropriate positions.
`<sg-parallax-columns>`	A `data-sg-grid` containing two `data-sg-column` elements with `data-sg-card` items; images sit in `data-sg-media` wrappers.
`<sg-mosaic-zoom>`	`data-sg-stage` with a `data-sg-mosaic` list containing one `data-sg-feature` and multiple `data-sg-tile` elements.
`<sg-image-marquee>`	One or two `data-sg-row` wrappers with `data-sg-track` word/image lists; the second row is `aria-hidden`.
`<sg-bento-assemble>`	A `data-sg-grid` of `data-sg-tile` items; numbers use `data-sg-count`. Optional `data-sg-head` and `data-sg-badge`.
`<sg-portrait-burst>`	`data-sg-stage` containing `data-sg-head` and `data-sg-person` portraits; optional `data-sg-pill` facts.
`<sg-case-track>`	`data-sg-stage` with `data-sg-track` list and `data-sg-card` items; optional `data-sg-head` and `data-sg-foot`.
`<sg-split-word>`	`data-sg-stage` with `data-sg-line`, two `data-sg-half` elements and a `data-sg-card`; optional `data-sg-below`.

Hero Configuration Reference

WebGPU heroes

aurora-mesh

Option	Type, default, and behavior
`colors`	CSS color array (1-4); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.78 0.14 175)', 'oklch(0.62 0.2 305)']`. Colors of the light bands.
`background`	CSS color; default: `var(--background, #0b0c10)`. Background color.
`speed`	number (0.1-3); default: `1`. Band animation speed.
`intensity`	number (0.2-2); default: `0.75`. Brightness.
`pointer`	boolean; default: `true`. Pointer response.
`calm`	number (0-1); default: `0.55`. Clear area behind the heading.
`poster`	string; default: `Unset`. Optional fallback image.

ink-flow

Option	Type, default, and behavior
`colors`	CSS color array (1-4); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.72 0.19 330)', 'oklch(0.8 0.15 200)']`. Ink colors.
`background`	CSS color; default: `var(--background, #0b0c10)`. Canvas background.
`swirl`	number (0-60); default: `24`. Vorticity strength.
`inkFade`	number (0.05-4); default: `0.7`. Ink fade per second.
`flowFade`	number (0-4); default: `0.25`. Flow decay per second.
`ambient`	boolean; default: `true`. Idle currents.
`pointer`	boolean; default: `true`. Cursor-driven ink.
`calm`	number (0-1); default: `0.7`. Clear headline area.
`detail`	low / medium / high; default: `medium`. Simulation resolution.
`poster`	string; default: `Unset`. Optional fallback image.

particle-type

Option	Type, default, and behavior
`colors`	CSS color array (1-3); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.72 0.19 330)', 'oklch(0.85 0.12 95)']`. Particle colors.
`background`	CSS color; default: `var(--background, #0b0c10)`. Background color.
`scatter`	number (0-3); default: `1`. Particle displacement strength.
`spring`	number (0.3-3); default: `1`. Return-to-letter force.
`gap`	number (1.5-6); default: `2.2`. Particle spacing in CSS pixels.
`size`	number (0.3-1.2); default: `0.95`. Particle size relative to gap.
`pointer`	boolean; default: `true`. Pointer scattering.
`poster`	string; default: `Unset`. Optional fallback image.

gravity-field

Option	Type, default, and behavior
`colors`	CSS color array (1-3); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.75 0.16 220)', 'oklch(0.85 0.12 95)']`. Particle color bands.
`background`	CSS color; default: `var(--background, #0b0c10)`. Background color.
`gravity`	number (0-3); default: `1`. Pointer attraction.
`flow`	number (0-3); default: `1`. Current drift.
`size`	number (0.5-4); default: `1.4`. Particle size in CSS pixels.
`pointer`	boolean; default: `true`. Pointer attraction enabled.
`calm`	number (0-1); default: `0.6`. Clear headline area.
`detail`	low / medium / high; default: `medium`. Particle count tier.
`poster`	string; default: `Unset`. Optional fallback image.

reaction-diffusion

Option	Type, default, and behavior
`colors`	CSS color array (1-2); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.8 0.15 160)']`. Pattern colors.
`background`	CSS color; default: `var(--background, #0b0c10)`. Background color.
`pattern`	coral / maze / spots; default: `coral`. Pattern form.
`speed`	integer (2-24); default: `10`. Simulation steps per frame.
`pointer`	boolean; default: `true`. Cursor-seeded growth.
`calm`	number (0-1); default: `0.8`. Clear headline area.
`detail`	low / medium / high; default: `medium`. Simulation grid resolution.
`poster`	string; default: `Unset`. Optional fallback image.

liquid-glass

Option	Type, default, and behavior
`colors`	CSS color array (1-2); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.97 0.02 250)']`. Glass tint and edge light.
`background`	CSS color; default: `var(--background, #0b0c10)`. Background color.
`image`	string; default: `/sharingan/product.png`. Image used by the effect; React hero passes content.media.src.
`refraction`	number (0-2); default: `1`. Distortion strength.
`drops`	number (0-5); default: `4`. Animated glass drops.
`pointer`	boolean; default: `true`. Pointer-controlled drop.
`poster`	string; default: `Unset`. Optional fallback image.

DOM heroes

gamepad

Option	Type, default, and behavior
`colors`	four CSS colors; default: `#2f9d5c, #2f4bc4, #e5b41d, #d23538`. Y/X/B/A button colors.
`shell`	auto / clay / graphite / translucent; default: `auto`. Controller body finish.
`tilt`	boolean; default: `true`. Pointer tilt.
`keyboard`	boolean; default: `true`. Keyboard input.
`gamepad`	boolean; default: `true`. Physical gamepad input.
`easterEgg`	boolean; default: `true`. Konami-code finish.

holo-card

Option	Type, default, and behavior
`colors`	CSS color array (2-4); default: `['oklch(0.82 0.14 210)', 'oklch(0.78 0.17 320)', 'oklch(0.9 0.15 95)', 'oklch(0.82 0.15 155)']`. Holographic foil colors.
`surface`	dark / light; default: `dark`. Card background.
`pattern`	guilloche / lines / none; default: `guilloche`. Foil engraving.
`tilt`	boolean; default: `true`. Pointer tilt.
`gyro`	boolean; default: `true`. Device orientation.
`flip`	boolean; default: `true`. Card flip interaction.

split-headline

Option	Type, default, and behavior
`intro`	rise / scatter / type; default: `scatter`. Letter entrance effect.
`stagger`	number (0-120); default: `28`. Delay between letters, milliseconds.
`accent`	CSS color; default: `var(--brand, oklch(0.62 0.2 262))`. Pointer highlight color.
`radius`	number (0.5-6); default: `1.4`. Pointer reach in letter heights.
`strength`	number (0-1.5); default: `1`. Letter response strength.
`pointer`	boolean; default: `true`. Pointer letter reaction.
`idle`	boolean; default: `true`. Idle text wave.

marquee-type

Option	Type, default, and behavior
`speed`	number (0.1-4); default: `1`. Text scroll speed.
`direction`	alternate / left / right; default: `alternate`. Row travel direction.
`look`	mixed / solid / outline; default: `mixed`. Letter fill style.
`tilt`	number (-8-8); default: `-3`. Band angle in degrees.
`accent`	CSS color; default: `var(--brand, oklch(0.62 0.2 262))`. Pointer and separator color.
`separator`	string (up to 3 characters); default: `✦`. Word separator.
`pointer`	boolean; default: `true`. Pointer slowdown.
`scroll`	boolean; default: `true`. Page-scroll acceleration.

terminal-boot

Option	Type, default, and behavior
`speed`	number (5-80); default: `24`. Typed characters per second.
`accent`	CSS color; default: `var(--brand, oklch(0.68 0.17 262))`. Terminal accent.
`loop`	boolean; default: `false`. Repeat sequence.
`copy`	boolean; default: `true`. Command copy button.

app-window

Option	Type, default, and behavior
`accent`	CSS color; default: `var(--brand, oklch(0.62 0.2 262))`. Chart and UI highlights.
`stagger`	number (0-300); default: `110`. Panel entrance delay in milliseconds.
`tilt`	boolean; default: `true`. Pointer tilt.
`countUp`	boolean; default: `true`. Animated stats.

beam-grid

Option	Type, default, and behavior
`colors`	CSS color array (1-3); default: `['var(--brand, oklch(0.62 0.2 262))', 'oklch(0.78 0.14 200)']`. Beam colors.
`cell`	number (24-160); default: `64`. Cell size in pixels.
`beams`	integer (0-16); default: `6`. Concurrent beams.
`speed`	number (0.3-3); default: `1`. Beam movement speed.
`length`	number (40-480); default: `160`. Beam length in pixels.
`pointer`	boolean; default: `true`. Pointer highlight and click bursts.
`calm`	number (0-1); default: `0.6`. Clear headline area.

conic-rays

Option	Type, default, and behavior
`colors`	CSS color array (1-3); default: `['var(--brand, oklch(0.66 0.2 262))', 'oklch(0.78 0.14 175)', 'oklch(0.7 0.18 305)']`. Ray layer colors.
`rays`	integer (4-24); default: `10`. Rays per layer.
`spread`	number (0.15-0.85); default: `0.42`. Ray width.
`speed`	number (0.1-3); default: `1`. Rotation speed.
`origin`	top / center / bottom; default: `top`. Light origin.
`intensity`	number (0.2-1.5); default: `0.8`. Ray brightness.
`pointer`	boolean; default: `true`. Pointer lean.
`calm`	number (0-1); default: `0.45`. Clear headline area.

gallery-fan

Option	Type, default, and behavior
`spread`	number (0.3-1); default: `0.86`. Fan width relative to hero.
`angle`	number (0-40); default: `22`. Outer card rotation in degrees.
`depth`	number (0-500); default: `240`. Card depth in pixels.
`colors`	CSS color array (max 2); default: `['oklch(0.6 0.2 262)', 'oklch(0.62 0.14 160)']`. Collaborator cursor colors.
`intro`	boolean; default: `true`. Stack-to-fan opening.
`pointer`	boolean; default: `true`. Nearest-card lift.
`cursors`	boolean; default: `true`. Floating collaborator cursors.

trail-map

Option	Type, default, and behavior
`accent`	CSS color; default: `oklch(0.68 0.19 42)`. Map route and button accent.
`intro`	boolean; default: `true`. Route drawing animation.
`walker`	boolean; default: `true`. Animated route marker.
`parallax`	boolean; default: `true`. Pointer depth effect.
`clouds`	boolean; default: `true`. Cloud overlay animation.

curve-reel

Option	Type, default, and behavior
`curvature`	number; default: `0.7`. Card wall bend.
`speed`	number; default: `24`. Cards per minute.
`visible`	number; default: `7`. Visible cards on the arc.
`drag`	boolean; default: `true`. Drag and swipe rotation.
`tilt`	number; default: `3`. Pointer tilt in degrees.
`accent`	CSS color; default: `oklch(0.68 0.2 45)`. Accent color.
`steps`	boolean; default: `true`. Numbered step labels.
`intro`	boolean; default: `true`. Opening card stack.

bento-tiles

Option	Type, default, and behavior
`accent`	CSS color; default: `oklch(0.88 0.12 125)`. Feature card color.
`marks`	CSS color; default: `oklch(0.62 0.23 27)`. Portrait scanning marks.
`gradient`	CSS color array (2-3); default: `['oklch(0.86 0.09 225)', 'oklch(0.94 0.03 250)', 'oklch(0.91 0.06 40)']`. Wide card gradient.
`tiles`	boolean; default: `true`. Raised background tiles.
`tileSize`	number (48-160); default: `104`. Tile size in pixels.
`pointer`	boolean; default: `true`. Pointer tile motion.
`idle`	boolean; default: `true`. Ambient tile presses.
`intro`	boolean; default: `true`. Entrance animation.
`showNav`	boolean; default: `true`. Optional built-in navbar.

Scroll-Driven Sections

Section	Effect
`card-journey`	Shuffling cards become a staggered stack and then a tabbed grid.
`pinned-reveal`	A pinned headline reveals a growing image.
`scroll-read`	Words darken as the reader scrolls through text.
`parallax-columns`	Two columns move at different scroll rates.
`mosaic-zoom`	A large image returns to a mosaic grid.
`image-marquee`	Words and images move horizontally with scroll.
`bento-assemble`	Bento cards settle into place and figures count up.
`portrait-burst`	Portrait cards separate around a headline.
`case-track`	A horizontal case-study row responds to vertical scroll.
`split-word`	An oversized word separates to reveal a card and contact form.

To install a development section from a local checkout of Sharingan, use Node.js 20.18+ and pnpm. Run pnpm install, start pnpm dev, and run pnpm registry in another terminal from the project root. Point the @sharingan entry in components.json to http://localhost:3100/r/{name}.json. You can then install Card Journey:

npx shadcn@latest add @sharingan/card-journey

import { CardJourneySection } from "@/components/sections/card-journey/card-journey";
<CardJourneySection config={{ length: 2.5 }} />

Section Content Reference

Section	Public `content` fields
`card-journey`	Required: `statement`, `headline`, `cards` (3 to 9 `{src, alt, title, meta?, href?}` objects). Optional: `aside: {title, text?}`, `eyebrow`, `text`, `cta`, `tabs` (2 to 4 `{label, cards?}` objects). Each `cards` value inside a tab is an array of zero-based card indices.
`pinned-reveal`	Required: `headline`, `image: {src, alt}`. Optional: `eyebrow`, `caption: {title, text?}`, `cta: {label, href}`.
`scroll-read`	Required: `text` (20 to 400 characters). Optional: `eyebrow`, `images` (up to 6 `{src, alt}` objects), `cta`. Insert `{0}`, `{1}`, etc. into the text to position image entries.
`parallax-columns`	Required: `headline`, `cards` (4 to 10 `{src, alt, title, text?, href?}` objects). Optional: `eyebrow`, `text`.
`mosaic-zoom`	Required: `headline`, `feature: {src, alt, title, meta?}`, and `tiles` (8 to 16 `{src, alt}` objects). Optional: `eyebrow`, `text`, `cta`.
`image-marquee`	Required: `phrases` (2 to 8 strings), `images` (1 to 8 `{src, alt}` objects). Optional: `label` for the accessible description of the band.
`bento-assemble`	Required: `headline`, `tiles` (3 to 10 tile objects). Each tile may contain `size`, `tone`, `figure`, `title`, `text`, `label`, `image: {src, alt}`, or `avatars` (up to 6 images). `size` accepts `small`, `wide`, `tall`, `large` (default `small`); `tone` accepts `paper`, `accent`, `accent-2`, `photo` (default `paper`). Optional: `eyebrow`, `text`, `badge: {label, href}`.
`portrait-burst`	Required: `headline`, `people` (6 to 12 `{src, alt, name?, role?}` objects). Optional: `eyebrow`, `text`, two CTAs, `pills` (up to 4 strings).
`case-track`	Required: `headline`, `cases` (3 to 8 `{title, image, href, text?, tag?, figure?}` objects). `image` has `src` and `alt`. Optional: `eyebrow`, `text`, `cta`.
`split-word`	Required: `word`, `card: {title, lines, href?}`. `lines` has 1 to 4 strings. Optional: `eyebrow`, `split` (positive integer character index), `form: {action, submit?, subject?}`. `submit` defaults to `Send`; `subject` defaults to `true`. Supply a real form endpoint through `action`.

Section Configuration Reference

card-journey

Option	Type, default, and behavior
`length`	number (1.5-5); default: `3`. Pinned scroll length in screen heights.
`tilt`	number (0-14); default: `6`. Card rotation in degrees.
`shuffle`	boolean; default: `true`. Card shuffle.
`accent`	CSS color; default: `var(--foreground, #111114)`. Active tab color.

pinned-reveal

Option	Type, default, and behavior
`length`	number (0.5-3); default: `1.2`. Pinned scroll length in screen heights.
`start`	number (0.3-0.9); default: `0.55`. Initial image width fraction.
`radius`	number (0-48); default: `28`. Image corner radius in pixels.
`parallax`	boolean; default: `true`. Parallax inside image frame.

scroll-read

Option	Type, default, and behavior
`from`	number (0.4-0.9); default: `0.45`. Opacity of unread words.
`pop`	boolean; default: `true`. Inline image reveals.

parallax-columns

Option	Type, default, and behavior
`speed`	number (0-1); default: `0.5`. Difference in column scroll speed.
`depth`	boolean; default: `true`. Image parallax inside cards.

mosaic-zoom

Option	Type, default, and behavior
`length`	number (0.8-3); default: `1.6`. Pinned scroll length in screen heights.
`spread`	number (0-1.5); default: `0.7`. Initial tile spacing.

image-marquee

Option	Type, default, and behavior
`background`	CSS color; default: `oklch(0.93 0.19 122)`. Band color.
`ink`	CSS color; default: `#111114`. Text color.
`rows`	integer (1-2); default: `2`. Number of moving rows.
`distance`	number (5-60); default: `25`. Travel distance as a percentage of width.

bento-assemble

Option	Type, default, and behavior
`length`	number (0.8-3); default: `1.8`. Pinned scroll length in screen heights.
`spread`	number (0-1.2); default: `0.55`. Initial tile offset.
`count`	boolean; default: `true`. Count-up figures.
`accent`	CSS color; default: `#ee8a7b`. Primary accent.
`accentAlt`	CSS color; default: `#b9ccb1`. Secondary accent.

portrait-burst

Option	Type, default, and behavior
`length`	number (0.8-3); default: `1.6`. Pinned scroll length in screen heights.
`drift`	number (0-1); default: `0.5`. Portrait parallax travel.
`tilt`	number (0-20); default: `8`. Stack rotation in degrees.
`accent`	CSS color; default: `#ee8a7b`. Label accent.

case-track

Option	Type, default, and behavior
`speed`	number (0.5-2); default: `1`. Horizontal travel-to-scroll ratio.
`accent`	CSS color; default: `#ee8a7b`. Primary card accent.
`accentAlt`	CSS color; default: `#b9ccb1`. Alternate card accent.

split-word

Option	Type, default, and behavior
`length`	number (0.8-3); default: `1.5`. Pinned scroll length in screen heights.
`spread`	number (0-1.5); default: `0.8`. Initial letter spacing.
`tilt`	number (-15-15); default: `-4`. Card lean in degrees.
`accent`	CSS color; default: `#ee8a7b`. Card and submit button color.

Styling, Motion, and Browser Behavior

Sharingan uses --background, --foreground, --muted-foreground, --primary, --border, and --brand in its theme styles. Color configuration also accepts ordinary CSS colors and custom properties such as var(--brand).

WebGPU backgrounds use a color-gradient fallback or a supplied poster image when GPU rendering is unavailable. Sharingan honors prefers-reduced-motion and pauses heroes outside the viewport. Use ?motion=final or data-motion="final" on <html> to capture a repeatable still frame; ?motion=off turns off animation for previews.