registry:ui · Layout
pattern-hero-set — three forms, one grammar
Three hero forms of the terminal grammar: the terminal-window hero (hero-section with the right column prewired to a terminal-card whose command derives from copyCommand — one string drives the CTA label, the clipboard payload and the typed demo), the ASCII-art headline hero (art as whitespace-preserved payload in a pre under the mono scale law — wide banners scroll, ascii never reflows), and the badge-marquee hero (plain mono token strip with an aria-hidden duplicate on a seamless -50% CSS loop; prefers-reduced-motion kills the animation, folds the duplicate away and leaves a static scrollable row).
pattern-hero-set — the terminal-window hero
The canonical main: hero-section with the right column prewired to a terminal-card whose command derives from the copyCommand prop — one string drives the CTA label, the clipboard payload and the typed demo. Title and badges stay snippets; the entrance cascade is hero-section's own.
your-app · v0
Ship the registry into your repo. Keep the source.
A compact instance with the real composition rules — the copy stays yours, the law stays ours. The terminal demo types the same command the CTA copies.
$npx jixoai-ui init --hue 210
theme installed
hue applied
<script lang="ts">
import PatternHeroSet from '@ui/pattern-hero-set.svelte';
import PatternHeroAscii from '@ui/pattern-hero-set/pattern-hero-ascii.svelte';
import PatternHeroMarquee from '@ui/pattern-hero-set/pattern-hero-marquee.svelte';
import Badge from '@ui/badge.svelte';
</script>
<!-- 1. the terminal-window hero: one string drives CTA + typed demo -->
<PatternHeroSet
eyebrow="your-app · v1"
summary="One command, whole registry."
copyCommand="npx jixoai-ui init --hue 210"
>
{#snippet title()}Ship the registry. <em>Keep the source.</em>{/snippet}
{#snippet badges()}<Badge>OKLCH tokens</Badge>{/snippet}
</PatternHeroSet>
<!-- 2. the ascii-art hero: the banner IS the headline -->
<PatternHeroAscii art={figletBanner} summary="Mono scale clamps; art scrolls, never reflows." />
<!-- 3. the badge-marquee hero: a live token strip under the lead -->
<PatternHeroMarquee items={['oklch tokens', 'zero-dep atoms', 'svelte 5']} />pattern-hero-set — the ASCII-art hero
The headline IS a figlet banner: art arrives as payload and renders whitespace-preserved in a pre under the mono scale law — the size clamps with the viewport and wide banners scroll their own lane, ascii never reflows.
$ figlet -f standard jixoai
_ _ _ ___ _ _ _
| | | | . | |_| |_ _ _| |
|_____|___| _| | | | |_ |
GitHub-flavored brutalism The banner is the loudest thing on the page — everything else stays quiet: one lead paragraph, two buttons, no ornament.
<script lang="ts">
import PatternHeroSet from '@ui/pattern-hero-set.svelte';
import PatternHeroAscii from '@ui/pattern-hero-set/pattern-hero-ascii.svelte';
import PatternHeroMarquee from '@ui/pattern-hero-set/pattern-hero-marquee.svelte';
import Badge from '@ui/badge.svelte';
</script>
<!-- 1. the terminal-window hero: one string drives CTA + typed demo -->
<PatternHeroSet
eyebrow="your-app · v1"
summary="One command, whole registry."
copyCommand="npx jixoai-ui init --hue 210"
>
{#snippet title()}Ship the registry. <em>Keep the source.</em>{/snippet}
{#snippet badges()}<Badge>OKLCH tokens</Badge>{/snippet}
</PatternHeroSet>
<!-- 2. the ascii-art hero: the banner IS the headline -->
<PatternHeroAscii art={figletBanner} summary="Mono scale clamps; art scrolls, never reflows." />
<!-- 3. the badge-marquee hero: a live token strip under the lead -->
<PatternHeroMarquee items={['oklch tokens', 'zero-dep atoms', 'svelte 5']} />pattern-hero-set — the badge-marquee hero
A lead block over a token marquee — npm ls energy: plain mono tokens with dot separators (no chip boxes — the strip is text, so no atom paint is duplicated). The loop is pure CSS; under prefers-reduced-motion the animation dies, the aria-hidden duplicate folds away and the strip becomes a static scrollable row.
$ npm ls --depth 0
Every atom, one grammar.
- oklch tokens
- zero-dep atoms
- svelte 5 runes
- press law
- container queries
- shiki highlight
- jx-pure tier-1
- variant grammar
<script lang="ts">
import PatternHeroSet from '@ui/pattern-hero-set.svelte';
import PatternHeroAscii from '@ui/pattern-hero-set/pattern-hero-ascii.svelte';
import PatternHeroMarquee from '@ui/pattern-hero-set/pattern-hero-marquee.svelte';
import Badge from '@ui/badge.svelte';
</script>
<!-- 1. the terminal-window hero: one string drives CTA + typed demo -->
<PatternHeroSet
eyebrow="your-app · v1"
summary="One command, whole registry."
copyCommand="npx jixoai-ui init --hue 210"
>
{#snippet title()}Ship the registry. <em>Keep the source.</em>{/snippet}
{#snippet badges()}<Badge>OKLCH tokens</Badge>{/snippet}
</PatternHeroSet>
<!-- 2. the ascii-art hero: the banner IS the headline -->
<PatternHeroAscii art={figletBanner} summary="Mono scale clamps; art scrolls, never reflows." />
<!-- 3. the badge-marquee hero: a live token strip under the lead -->
<PatternHeroMarquee items={['oklch tokens', 'zero-dep atoms', 'svelte 5']} />pick guide
Picking a form
Three forms, one decision: what does the first screen prove?
The product IS a command. The typed demo proves the install story before a single scroll — pair with a copy CTA.
The brand IS a wordmark. Brutalist confidence with one paragraph of air — nothing else competes with the banner.
The value IS a list of properties. The strip keeps moving under a quiet headline — proof by inventory.
usage
Usage
One import per form; the set's barrel exports the canonical main as default and the two siblings as named exports.
<script lang="ts">
import PatternHeroSet from '@ui/pattern-hero-set.svelte';
import PatternHeroAscii from '@ui/pattern-hero-set/pattern-hero-ascii.svelte';
import PatternHeroMarquee from '@ui/pattern-hero-set/pattern-hero-marquee.svelte';
import Badge from '@ui/badge.svelte';
</script>
<!-- 1. the terminal-window hero: one string drives CTA + typed demo -->
<PatternHeroSet
eyebrow="your-app · v1"
summary="One command, whole registry."
copyCommand="npx jixoai-ui init --hue 210"
>
{#snippet title()}Ship the registry. <em>Keep the source.</em>{/snippet}
{#snippet badges()}<Badge>OKLCH tokens</Badge>{/snippet}
</PatternHeroSet>
<!-- 2. the ascii-art hero: the banner IS the headline -->
<PatternHeroAscii art={figletBanner} summary="Mono scale clamps; art scrolls, never reflows." />
<!-- 3. the badge-marquee hero: a live token strip under the lead -->
<PatternHeroMarquee items={['oklch tokens', 'zero-dep atoms', 'svelte 5']} />axes
Universal props
The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. The set's canonical main is the NO-ROOT composition form (seven lanes — the terminal bezel theme pin owns that name, the context round-2 passthrough exemption): it supplies the axes through the ambient chain and HeroSection stamps the carriers on its root; the ascii/marquee siblings own their roots and stamp directly.
PatternHeroAscii / PatternHeroMarquee · universal props
$ figlet axes
jixoai
the ascii banner keeps its own viewport-clamped scale; the chrome scales.
<PatternHeroSet size={18} density="small">…</PatternHeroSet>api
API
PatternHeroSet (the canonical main), PatternHeroAscii and PatternHeroMarquee (named exports).
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| HeroSet: eyebrow / summary * | string | — | Hero-section lead props, passed through. |
| HeroSet: copyCommand * | string | — | ONE string, three jobs: CTA label + clipboard payload + the typed terminal command. |
| HeroSet: title / badges / secondary | Snippet | — | Hero-section snippets, forwarded as props. |
| HeroSet: barTitle | string | 'quick-start — zsh' | The terminal window's title-bar label. |
| HeroSet: outputs | readonly string[] | ['theme installed', 'hue applied'] | Lines surfaced after the command types out. |
| HeroSet: theme / speed | 'dark' | 'light' | 'system' / number | 'dark' / 1 | Terminal bezel + typing pace multiplier. |
| Ascii: art * | string | — | The ascii banner — whitespace-preserved payload (figlet output). |
| Ascii: ctaLabel / ctaHref | string | 'get started' / '#' | The primary CTA; an empty label renders no CTA row. |
| Ascii: secondaryLabel / secondaryHref | string | '' / '#' | An outline CTA beside the primary. |
| Marquee: items * | readonly string[] | — | The marquee tokens — plain string payload. |
| Marquee: title | Snippet | — | The h2 content (the strip is below it). |
| Marquee: duration | number | 24 | One full pass of the strip, in seconds. |
Universal props
| Property | Type | Default | Description |
|---|---|---|---|
| size | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | the base scale — root font-size; parts size in em |
| shape | 'round' | 'scoop' | 'bevel' | 'notch' | 'square' | 'squircle' | 'auto' | 'auto' · ambient scope | corner geometry (CSS corner-shape; §14 degrade table) |
| radius | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | corner size; auto = the concentric broadcast (§3) |
| density | 'small' | 'medium' | 'large' | 'auto' | number | 'auto' · ambient scope | spacing/leading scale over the kernel channels (§4) |
| color | 'primary' | 'secondary' | 'error' | 'warn' | 'success' | 'info' | 'auto' | number | string | 'auto' · ambient scope | the hue axis of the fixed oklch primary system (§5) |
| theme | 'light' | 'dark' | 'system' | 'auto' | 'auto' · ambient scope | light/dark profile; system = the JS-mutable global (§6) |
| elevation | 'level-1' | 'level0' | 'level1' | 'level2' | 'level3' | 'level4' | 'level5' | 'auto' | number | 'auto' · ambient scope | official M3 levels over the surface ladder (§7) |
| motion | 'reduced' | 'subtle' | 'normal' | 'expressive' | 'auto' | number | 'auto' · ambient scope | intensity across the motion kernels (§8) |