Nexus · Persuade

Recipes. Real components inside.

One showcase. Attention vertical primitives — hosts are Card, Button, CodeBlock, Avatar — sprinkled, configurable, system-true.

Live

SHIP THE MOMENT

Built for dashboards .

Attention vertical — sprinkleable, system-hosted.

AL GH AT KJ +2

Teams already shipping the feel

Proof strip · names

Linear Vercel Stripe Notion Figma Supabase Astro Tailwind

Cards that react

One primitive — EffectCard wraps Card . Same padding. h-full + overflow-clip so glare/beam never spill.

Spotlight

Follow the pointer

Radial highlight on brand tokens — not purple neon.

Glare

Sheen on hover

Diagonal light across product surfaces.

Beam

Living edge

Conic beam clipped to Card radius.

Shine

Masked shine border

Primary token only — no rainbow.

Tilt

Perspective pull

CSS rotate toward pointer. Reduced motion stays flat.

Wipe

Enter from the edge

Overlay slides in from the side you enter.

Commit and reveal

Hold-to-confirm on Button. Detail that grows on ShiftCard — not a flip. Stronger Magnetic when the CTA should feel alive.

Shift

Interaction states in place.

Hover or focus — detail opens in place.

Error → loading → empty → data. Retry is an action key, not a stack trace.

Auth

Session ready

Better Auth wired — not a mock form.

Sign-in, session, and protected routes share one grove.

Hold

Hold to delete

Fill completes → click fires. Release cancels.

Before / after

MediaCompare — drag the seam. Sister to CodeCompare, for product screenshots and surfaces.

Flat

Static card

No pointer response. No hold. No shift.

Alive

System moments

Tilt, wipe, hold, shift — same Card grove.

Default Attention

Contact sheet

ContactSheet — one picked frame enlarged, the rest as a numbered filmstrip. Every frame is a link.

Figures on the sea wall at dusk, derelict pier beyond

Attention-grabbing pieces — shimmer text, rotating words, logo walls, image lenses — all live below.

See them

Text that earns attention

New + extended — not replacements. CountUp already owns ticker. ScrollAnimate gains blurFade.

Shimmer the claim

Underline draws on view

Rotate: Rotating headline phrases: deliberate, hosted, sprinkleable

LETTER PULL

CountUp (existing)

0 +

SlidingDigits (new)

$ 0123456789 0123456789 0123456789 0123456789

Claim work

bd update —claim

Research clones

docs/analysis/wow-catalogs

Host the grove

Card · Button · Avatar

Prove on compositions

Append — don’t replace

Proof patterns

LogoCloud, AvatarTooltipGroup, TestimonialsRow — compose Avatar, Tooltip, CardTestimonial. Illustrative people and quotes — replace with permissioned customer evidence before publishing.

Astro
Tailwind
Vitest
Zod
CVA
i18n

Hover faces — Tooltip hosts names

The attention primitives feel like the same design system — not a sticker pack.

Maya Chen

Design lead, Northwind

Hold-to-confirm and ShiftCard shipped in one afternoon. Buyers notice.

Jonas Berg

Founder, Orbit Labs

Finally a template where wow moments host Card and Button correctly.

Sofia Reyes

FE lead, Harbor

The attention primitives feel like the same design system — not a sticker pack.

Maya Chen

Design lead, Northwind

Hold-to-confirm and ShiftCard shipped in one afternoon. Buyers notice.

Jonas Berg

Founder, Orbit Labs

Finally a template where wow moments host Card and Button correctly.

Sofia Reyes

FE lead, Harbor

Media lens

ImageLens — magnifier over slotted media. Reduced motion hides the glass.

Lens · move pointer

Inspect the surface

Glass follows the cursor. Magnified clone tracks the same point.

Nexus · Attention · Tokens

Integrations that orbit

OrbitRing owns padded hub + item hosts. Slotted icons are content only — chrome is the tree (Astro :global for slotted nodes).

Auth

D13

Nexus

Flip for detail

Live stack

Deployed

Preview ready on edge.

i18n complete

5 locales checked.

Stub noted

OAuth optional in config.

Text reveal

Deliberateness is the soul — every moment earns its place on the page.

Developer trust

src
- components
  - ui/EffectCard.astro
  - ui/OrbitRing.astro
  - compositions/CodeCompare.astro
- pages/showcase/compositions.astro
docs/context/attention-vertical-implementation-research.md

bypass.astro

            <div class="rounded-xl bg-primary-500/20">
  Fake metric
</div>

template-way.astro

            <StatsCard
  label="MRR"
  value={48200}
  trend={4.2}
/>

Collapsible sidebar navigation

Hierarchical sticky rail for docs and help. TocSidebar stays the on-this-page outline; FileTree stays decorative. Collapse follows the active path — no auto-close on scroll.

Buyer-reachable index

Pass a tree of labels and hrefs. Route mode marks the active path; scroll mode powers FAQ category jumps. FAQCategoryNav was deleted — FAQ uses this.

Browser theater

The demo is the product.

nexus.app/dashboard

Healthyus-east-1

Requests

1,284

12.4%

p95

42ms

8.1%

Errors

0.12%

2.0%

Sample telemetry — illustrative values, not live data.

D13 wired

Every data surface can show error, loading, empty, or data.

Split continuum

One seam. Two worlds.

Dashboard

Dense enough to work.

Inbox

Pipeline

$182k

Alerts

Reports

Marketing

Calm enough to sell.

Editorial type. Breath. One claim.

Depth stack

Cards that stack as you scroll.

Auth

Sessions that actually work

Better Auth, localized actions, honest stubs where the backend isn’t there yet.

D13

Honest empty, honest error

Error → loading → empty → data on every data surface. Spec, not decoration.

Tokens

Beauty with a spine

OKLCH, CVA, enforcement layers. Pretty only when the system allows it.

Systems, not shells

Auth + i18n + SEO

Forms deliver. Locales complete. Empty states are the product.

What’s included

Better Auth, five locales, D13 states, D12 enforcement — not mock chrome.

What’s honest

Stubs are labeled. Feature flags gate incomplete surfaces.

Recipes buyers can copy

DashboardPage

Stats + drawers

DossierPage

Record + facets

Feel as differentiation

signature moment per surface

Free templates ship grids. Nexus ships moments — then lets you own them.

State scrubber

One panel, every state.

Couldn't load metrics

Try again in a moment.

Data

Locale flip

Language without a reload.

Ship the feel, not just the components.

Flip the language. The layout holds. That's template i18n.

Theme flip

Light and dark — same tokens.

Dark · uses template theme tokens

Light Dark

PrimarySuccessWarning

Active users

2,840

6.2%

Animated metric

0.0 %

Tokens, not hardcoded colors

This island flips with setTheme() — the same API as the header toggle.

Atmosphere fields

Hero-capable overlays — CSS + tiny clients. Host content; don’t fight it. Epic astro-template-aji.

NoiseGrain

Film grain

SVG turbulence — not a photo texture dump.

HatchField

Diagonal hatch

Animata lines — token ink only.

ZigZagField

Zigzag tile

Pattern atmosphere without neon.

Scanlines

CRT scan

Optional drift. Dark product demos.

FlickerGrid

Sparse flicker

Magic flickering-grid — canvas-free rebuild.

SpotlightBg

Move the light

Pointer radial — same family as EffectCard spotlight.

PatternField · plus

Plus mosaic

Syntax hero-patterns family.

PatternField · cross

Cross mosaic

Edge-faded SVG tile.

PathWaves

SVG path drift

Kokonut paths — CSS alternate, no Motion.

HoverGrid

Cell under pointer

Interactive grid highlight.

ShootingStarsField

Night sky streaks

Animata shooting-stars intent — token primary, twinkle dots, reduced-motion static. Also registered as Hero backgroundVariant="shooting-stars".

Hero: shooting stars

Full Hero with the new background — not a one-off page hack.

Ship under the stars

Hero backgrounds are template features. This one is shooting-stars — CSS streaks + vignette.

Get Nexus All backgrounds

Starfield

Twinkle only

Lighter cousin — dots without streaks.

Product, framed

DeviceFrame — static chrome sibling to BrowserTheater. One slot, no tabs, no client script. Epic astro-template-zca.

variant="macbook"

MRR

$48k

4.2%

Churn

2.1%

0.4%

variant="safari"

nexus.app/settings

Settings

Workspace preferences

Same tokens, hosted inside a device chrome — not a new palette.

Import · Configure · Ship

What’s in the box is the pitch.

One page. Real hosts. Research: docs/context/wow-catalog-scour-research.md · docs/context/attention-catalog-adaptation-plan.md

SHIP THE MOMENT

Cards that react

Follow the pointer

Sheen on hover

Living edge

Masked shine border

Perspective pull

Enter from the edge

Commit and reveal

Interaction states in place.

Session ready

Hold to delete

Before / after

Static card

System moments

Contact sheet

Text that earns attention

Shimmer the claim

Underline draws on view

Proof patterns

Media lens

Inspect the surface

Integrations that orbit

Flip for detail

States at a glance.

Error → data

Live stack

Deliberateness is the soul — every moment earns its place on the page.

Developer trust

Collapsible sidebar navigation

Buyer-reachable index

The demo is the product.

One seam. Two worlds.

Dense enough to work.

Calm enough to sell.

Cards that stack as you scroll.

Sessions that actually work

Honest empty, honest error

Beauty with a spine

Systems, not shells

What’s included

What’s honest

Recipes buyers can copy

Stats + drawers

Record + facets

Feel as differentiation

One panel, every state.

Couldn't load metrics

No metrics yet

Language without a reload.

Ship the feel, not just the components.

Light and dark — same tokens.

Atmosphere fields

Film grain

Diagonal hatch

Zigzag tile

CRT scan

Sparse flicker

Move the light

Plus mosaic

Cross mosaic

SVG path drift

Cell under pointer

Night sky streaks

Hero: shooting stars

Ship under the stars

Twinkle only

Product, framed

Workspace preferences