@atroui

cn() helper (clsx + tailwind-merge).

Shared motion tokens — hover language, presence helpers, timeline reveal (Family Values easings, no springs/blur).

getBrand() and DEFAULT_BRAND - edit or override with NEXT_PUBLIC_SITE_*.

Shared ProjectBrief type + OG/thumbnail href helpers for Scope → Planner → social card glue.

Soft-rect AtroUI button — hover lift ≤1px, press into surface, focus parity.

Light / system / dark toggle using next-themes.

Contrast helpers that lift muted type to WCAG AA against the canvas.

Light/dark switch that keeps brand canvases and lifts type that would vanish in the other mode.

Elevated surface with header, content, and footer slots.

Soft-rect multi-line control aligned to Atro input tokens.

Soft-rect checkbox with Motion check path draw on Base UI.

Soft-rect checkbox group — compose with Checkbox (value / parent).

Radio group with Motion fill-scale indicator on Base UI.

Disclosure with height:auto, chevron rotate, and optional focus morph.

Single disclosure with height:auto settle and chevron rotate.

Filterable select on Base UI with Mira soft-rect, popup settle, and list stagger ≤40ms.

Suggest-as-you-type with popup settle, layoutId highlight, and list stagger ≤40ms.

Edge panel with panelTween slide, backdrop fade, and portal presence.

Soft-rect select on Base UI with caret rotate, popup settle, and list stagger ≤40ms.

Modal dialog on Base UI with Mira surfaces and short settle motion.

Confirm destructive or irreversible actions with Base UI Alert Dialog.

Dropdown menu on Base UI with soft-rect items and settle motion.

Pointer context menu on Base UI with menu settle and row stagger.

Site nav panels with peer crossfade and soft-rect Mira popup.

Focus-roving menubar shell with Menu grammar and Motion popups.

Anchored popover surface for progressive disclosure.

Fast tooltip with micro appear motion and reduced-motion respect.

Hover/focus link preview — soft popover settle; opt-in tilt / magnetic / spotlight for media.

Bounded scroll region with soft-rect thumb that fades when idle.

Soft-rect hairline divider — static, no decorative motion.

Quiet Field spine — label, description, Motion error reveal, control.

Single-line input aligned to Atro control height and soft-rect.

Soft-rect stepper number field with careful scrub feedback on Base UI.

Soft-rect OTP digit slots with whileFocus settle (~160ms easeOutExpo) on Base UI.

Base UI form validation orchestration — pair with Field.

Legend + soft-rect group chrome for related controls.

Soft-rect switch — layout thumb + flex justify flip (Motion.dev Base UI).

Edge toast stack on Base UI with opacity+y enter/exit and careful CSS-var stacking.

Task progress bar with soft-rect fill width tween on Base UI Progress.

Range slider with thumb press micro-motion; track fill stays 1:1 while dragging.

Read-only meter gauge with soft-rect value fill tween on Base UI Meter.

Soft-rect avatar with image fade-in and fallback crossfade on Base UI Avatar.

Tabs with layoutId pill morph + panel layout height (Motion.dev layout).

Soft-rect two-state button with pressed fill morph on Base UI.

Toggle peers with layoutId highlight morph — Motion.dev Base UI pattern.

Dense soft-rect toolbar chrome with Motion press feedback.

Path navigation trail for docs and product pages.

Long-form typography container for articles and MDX.

The scroll reveal — opacity + rise. One primitive; use fadeInSection for landing triggers.

Stagger children on scroll with StaggerChild (clamped ≤50ms).

Reading-progress bar driven by scroll position.

Interrupted-A mark and wordmark. Edit the SVG in your repo.

Docs-matching homepage hero with editable CONTENT (stamp, CTAs, sprint, OG preview panel).

Founder / who band with editable CONTENT constants.

Sticky site header with editable NAV and CTA.

Bold footer with editable headline, studio links, and socials.

How-we-work principles band with editable CONTENT and PRINCIPLES.

Selected work band with editable PROJECTS list.

Free tools / lab band with editable TOOLS catalog.

Capabilities / crafts band with editable CONTENT and CRAFTS (distinct from pricing).

Fixed-package pricing band with editable CONTENT and PACKAGES.

Product feature grid with editable CONTENT and FEATURES.

Partner / client name strip with editable CONTENT and NAMES.

Bento feature grid with editable CONTENT and FEATURES. Soft-rect panels.

Layered testimonial cards with prev/next. Editable CONTENT and TESTIMONIALS.

Metric strip with editable CONTENT and STATS.

Headline + primary/ghost CTAs over a quiet brand wash. Editable CONTENT.

Toggleable pricing tiers with editable CONTENT and TIERS.

CSS logo/name marquee with editable CONTENT and LOGOS. Respects reduced motion.

Split login/signup shell with editable CONTENT. No auth backend.

One-file SaaS landing composition. Editable CONTENT — compose sections after install.

Sticky scroll CTA with editable CONTENT (no analytics wiring).

Exit-intent dialog with editable CONTENT and storage keys.

Lighter footer with editable CONTENT and link columns.

Accordion FAQ with editable CONTENT and ITEMS.

Email waitlist form with editable CONTENT; posts to your API.

Email newsletter form with editable CONTENT; posts to your API.

Theme-aware Calendly iframe with editable CONTENT and email fallback.

Credit badge + copyable HTML snippet with editable CONTENT.

next-themes wrapper for class-based dark mode.

Sequential in-view reveal for heroes — opacity + y only (no blur).

Deprecated alias of Fade In with landing defaults. Prefer @atroui/fade-in.

Shared-letter morph between label strings. Opt-in for state swaps.

Copy → check Button recipe with TextMorph + icon swap. Rare-path delight — not default on every Button.

Letter-staggered label swap on hover/focus for links and secondary CTAs.

Word/line stagger enter — opacity + y + clip. Marketing default.

Progress-driven word opacity via scroll — opacity only, no blur. Pull lines.

Mild pointer pull for media cards — intensity ≤0.35, range ≤80px. Never chrome.

Mild 3D media tilt toward the pointer — rotationFactor ≤6–8°. Opt-in only.

Low-opacity cursor wash for dark Mira media cards. Reduced motion skips.

Pricing/stats counter — digits tween as numbers with easeOutSoft. Reduced motion jumps to final.

Wait-mode content swaps for feature tabs and docs panels — opacity + small y.

Circular founder portrait with editable CONTENT src.

getSiteUrl() for metadata and JSON-LD.

getSiteDomain() helper for structured data.

trackEvent and experiment helpers.

X / LinkedIn / copy-link share bar.

model-viewer AR portfolio with editable CONTENT models.

Studio status board with editable CONTENT projects.

Multi-step project scoping planner UI.

Plausible / GA loader with trackEvent helpers.

CSS OG card preview with editable CONTENT presets.

OG style gallery with editable CONTENT examples.

OG generator UI shell. Wire CONTENT.endpoint (Host API).

CSS thumbnail preview with editable CONTENT.

Thumbnail generator UI shell. Wire CONTENT.endpoint (Host API).

AI scoping chat UI. Wire CONTENT.endpoint (Host API).

Scope → Planner → OG in one room. Shared ProjectBrief. Preview without keys; AI Host APIs are BYOK.

Vibrant soft-rect marketing stack in one add: header, hero, logos, bento, stats, testimonials, pricing, FAQ, CTA, footer.

Blog index layout with editable CONTENT posts.

Resource library layout with editable CONTENT items.

POST /api/contact - honeypot, rate limit, SMTP via atroui/api/contact.

POST /api/waitlist - Resend audience or SMTP via atroui/api/waitlist.

POST /api/newsletter - Resend audience or SMTP via atroui/api/newsletter.

POST /api/generate - consumer HF/Google keys via atroui/api/generate. No keys shipped.

POST /api/thumbnail - consumer HF/Google/XAI keys via atroui/api/thumbnail. No keys shipped.

POST /api/scope - rule-based by default; optional XAI_API_KEY via atroui/api/scope.

Shared ASCII kit — luminance ramps, offscreen/reduced-motion aware tick loop, canvas character-cell metrics.

The spinning torus — 3D points z-buffered per character cell, shaded by luminance ramp.

Falling streams of glyphs whose color fades along each tail.

Function field f(x,y,t) mapped through a luminance ramp — one text node per frame.

Block-element bars (░–█); a copyable plain-text sparkline.

Pseudo-graphics progress (▰▱) filling in plottable steps.

VT100-style init log typed character by character, cursor pulsing.

FIGlet-style big text from a built-in 3×5 pixel font.

Cipher glyphs locking into the message left to right.