"use client"; /** * Hush — "a softer way to end the day" * Converted from the curation HTML/CSS source * (Marketing/assets/sections/v9-variety-proof/hush/hush.html) * into React + Tailwind v4 + Motion, per 14_library_conversion_plan.md §4.1. * * Design tokens (mirrors the source's :root custom properties — the strict, * mechanically-derived version of these lives in the sibling manifest.json's * `designTokens` field; this component itself uses literal Tailwind * arbitrary-value utilities everywhere, deliberately, so it renders * correctly standalone — e.g. side-by-side with other designs in a gallery — * without depending on any host app's `@theme` registration): * * --cream: #f7f2ea font-serif -> Fraunces, Georgia, serif * --cream-deep: #ede5d8 font-sans -> DM Sans, system-ui, sans-serif * --sage: #7e9b7a * --sage-light: #a8c0a4 Radius scale: sm 12 · md 24 · lg 40 · xl 64 · pill 999 * --sage-dark: #5a7356 Shadows: soft / mid / lift (see SHADOW_* below) * --terracotta: #d98b6f * --peach: #e8b9a3 * --peach-light: #f2d4c5 * --clay: #3a322c * --clay-mid: #6b5f57 * --clay-light: #9b8e86 * --white: #fdfaf6 * * Font-family utilities in this file use Tailwind's arbitrary PROPERTY * syntax (`[font-family:Fraunces,Georgia,serif]` / `[font-family:DM_Sans,...]`) * rather than the bare `font-serif`/`font-sans` NAMED utilities, deliberately: * the named utilities resolve through Tailwind's default theme * (ui-serif/ui-sans-serif stacks) unless a host app registers a matching * `@theme` override, which this standalone component cannot assume. The * arbitrary-property form is self-contained and renders identically in any host. * * Font loading: Fraunces + DM Sans (Google Fonts, OFL) are expected to be * loaded by the host app (e.g. `next/font/google`, or tags in the * document head) — this component does not inject tags itself. * * Reduced motion: every animation in this file honors `useReducedMotion()`. * When true, scroll-reveals render in their final state immediately, the * breathing pacer's infinite loops are not started (rendered static at rest), * and hover micro-transitions collapse to a near-zero duration — matching the * source's `@media (prefers-reduced-motion: reduce)` block exactly (it forces * `animation-duration:0.01ms` / `transition-duration:0.01ms` rather than fully * removing the hover affordance). */ import * as React from "react"; import { motion, useReducedMotion, type TargetAndTransition } from "motion/react"; /* ──────────────────────────────────────────────────────────────────────── Shared style tokens / helpers ──────────────────────────────────────────────────────────────────────── */ const EASE_OUT_CUBIC: [number, number, number, number] = [0.33, 1, 0.68, 1]; const SHADOW_SOFT = "0 4px 24px rgba(58,50,44,.07), 0 1px 4px rgba(58,50,44,.05)"; const SHADOW_MID = "0 8px 40px rgba(58,50,44,.10), 0 2px 8px rgba(58,50,44,.06)"; const SHADOW_LIFT = "0 16px 56px rgba(58,50,44,.13), 0 4px 12px rgba(58,50,44,.07)"; const CONTAINER = "mx-auto max-w-[1120px] px-[clamp(20px,5vw,64px)]"; const SECTION_PAD = "pt-[clamp(72px,10vw,128px)] pb-[clamp(72px,10vw,128px)]"; /** Base for every h1/h2/h3 (source's global `h1,h2,h3{...}` rule) — family/weight/ * tracking/leading only; each heading then adds its own font-size on top, * since the source overrides `.feat-card h3{font-size:1.2rem}` with a flat * size (no responsive clamp) while section h2/h3 headings use the clamp. */ const SERIF_HEADING_BASE = "[font-family:Fraunces,Georgia,serif] font-light tracking-[-0.02em] leading-[1.15]"; const H1_CLASS = `${SERIF_HEADING_BASE} text-[clamp(2.6rem,6vw,4.4rem)]`; const H2_CLASS = `${SERIF_HEADING_BASE} text-[clamp(2rem,4vw,3rem)]`; const H3_CLASS = `${SERIF_HEADING_BASE} text-[clamp(1.2rem,2.5vw,1.5rem)]`; const SECTION_LABEL = "mb-4 block text-[0.78rem] font-medium uppercase tracking-[0.14em] text-[#5a7356]"; const FOCUS_RING = "focus-visible:outline focus-visible:outline-[2.5px] focus-visible:outline-offset-[3px] focus-visible:outline-[#5a7356] focus-visible:rounded-[4px]"; /** Scroll-reveal timing, ported from the source's `.reveal` / `data-delay` system. * data-delay 1..4 => 80/160/240/320ms; no attribute => 0ms. */ function useReveal() { const shouldReduceMotion = useReducedMotion(); return React.useCallback( (delayStep: 0 | 1 | 2 | 3 | 4 = 0) => { if (shouldReduceMotion) { // Matches source: .reveal.reduced { opacity:1; transform:none; animation:none } return {}; } return { initial: { opacity: 0, y: 22 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, amount: 0.12 as const, margin: "0px 0px -40px 0px" }, transition: { duration: 0.5, ease: EASE_OUT_CUBIC, delay: delayStep * 0.08, }, }; }, [shouldReduceMotion] ); } /** Hover-lift timing for cards, ported from `.step-card/.feat-card/.price-card:hover`. */ function useHoverLift(liftPx: number) { const shouldReduceMotion = useReducedMotion(); return { whileHover: { y: -liftPx, boxShadow: SHADOW_LIFT }, transition: { duration: shouldReduceMotion ? 0.0001 : 0.25, ease: EASE_OUT_CUBIC, }, }; } /** Button hover timing, ported from `.btn-primary/.btn-ghost:hover`. */ function useButtonHover() { const shouldReduceMotion = useReducedMotion(); return { duration: shouldReduceMotion ? 0.0001 : 0.22, ease: EASE_OUT_CUBIC, }; } /* ──────────────────────────────────────────────────────────────────────── Buttons ──────────────────────────────────────────────────────────────────────── */ type ButtonVariant = "primary" | "ghost" | "priceFree" | "pricePlus" | "cta"; const BUTTON_BASE = "inline-flex min-h-[48px] items-center justify-center gap-2 rounded-full px-8 py-[14px] [font-family:DM_Sans,system-ui,sans-serif] text-[0.95rem] font-medium tracking-[0.01em]"; function Button({ href, variant, className = "", ariaLabel, role, children, }: { href: string; variant: ButtonVariant; className?: string; ariaLabel?: string; role?: string; children: React.ReactNode; }) { const transition = useButtonHover(); const variantStyles: Record< ButtonVariant, { base: string; hover: TargetAndTransition } > = { primary: { base: "bg-[#3a322c] text-[#f7f2ea]", hover: { y: -2, boxShadow: SHADOW_MID, backgroundColor: "#2c2620" }, }, ghost: { base: "border-[1.5px] border-[#ede5d8] bg-transparent font-normal text-[#3a322c]", hover: { y: -2, boxShadow: SHADOW_SOFT, borderColor: "#9b8e86" }, }, priceFree: { base: "w-full border-[1.5px] border-[#ede5d8] bg-[#f7f2ea] text-[#3a322c]", hover: { y: -2, backgroundColor: "#ede5d8" }, }, pricePlus: { base: "w-full border-none bg-[#e8b9a3] text-[#3a322c]", hover: { y: -2, boxShadow: SHADOW_MID, backgroundColor: "#d98b6f", color: "#fdfaf6" }, }, cta: { base: "border-none bg-[#e8b9a3] text-[#3a322c]", hover: { y: -2, boxShadow: "0 12px 32px rgba(217,139,111,.35)", backgroundColor: "#d98b6f", color: "#fdfaf6", }, }, }; const v = variantStyles[variant]; return ( {children} ); } /* ──────────────────────────────────────────────────────────────────────── Wave dividers ──────────────────────────────────────────────────────────────────────── */ function Wave({ height, path, fill, background, className = "", }: { height: number; path: string; fill: string; background?: string; className?: string; }) { return ( ); } /* ──────────────────────────────────────────────────────────────────────── Small icon helpers ──────────────────────────────────────────────────────────────────────── */ function CheckMark({ ringFill, tickStroke }: { ringFill: string; tickStroke: string }) { return ( ); } function StarIcon() { return ( ); } /* ──────────────────────────────────────────────────────────────────────── Nav ──────────────────────────────────────────────────────────────────────── */ function NavBar() { const navLinkClass = `text-[0.9rem] text-[#6b5f57] transition-colors duration-[180ms] ease-linear hover:text-[#3a322c] ${FOCUS_RING}`; return (

); } /* ──────────────────────────────────────────────────────────────────────── Hero + breathing pacer ──────────────────────────────────────────────────────────────────────── */ function BreathingPacer({ reveal }: { reveal: ReturnType }) { const shouldReduceMotion = useReducedMotion(); const loop = (scaleRange: [number, number, number], opacityRange: [number, number, number], delay: number) => shouldReduceMotion ? undefined : ({ scale: scaleRange, opacity: opacityRange, } as const); const loopTransition = (delay: number) => shouldReduceMotion ? undefined : { duration: 5, delay, times: [0, 0.45, 1], repeat: Infinity, ease: "easeInOut" as const, }; return ( ); } function Hero() { const reveal = useReveal(); return (

Breathing & Sleep A softer way
to end the day Wind down with intention. Guided breathing to quiet your mind, sleep stories to carry you off, and gentle soundscapes to hold you there.

); } /* ──────────────────────────────────────────────────────────────────────── How it works ──────────────────────────────────────────────────────────────────────── */ const STEPS = [ { num: "01", title: "Choose your wind-down", body: "Pick a 5, 10, or 20-minute session — a breathing exercise, a sleep story, or a soundscape. No wrong choice.", }, { num: "02", title: "Follow the pace", body: "The breathing pacer guides your inhale and exhale at 5 cycles per minute — the rhythm your nervous system loves.", }, { num: "03", title: "Let go and drift", body: "As your body settles, transition seamlessly into a sleep story or layered soundscape. Hush fades out when you do.", }, ] as const; function StepCard({ step, delay }: { step: (typeof STEPS)[number]; delay: 0 | 1 | 2 | 3 | 4 }) { const reveal = useReveal(); const hover = useHoverLift(4); return (

{step.title}

{step.body}

); } function HowItWorks() { const reveal = useReveal(); return (

How it works Three quiet steps to deeper rest No alarm-clock energy. No streaks to chase. Just a gentle ritual you can return to every evening.

{STEPS.map((step, i) => ( ))}

); } /* ──────────────────────────────────────────────────────────────────────── Features ──────────────────────────────────────────────────────────────────────── */ function FeatureBreathIcon() { return ( ); } function FeatureStoriesIcon() { return ( ); } function FeatureSoundsIcon() { return ( ); } function FeatureAlarmIcon() { return ( ); } function FeatureCard({ id, delay, iconBg, icon, title, body, blobColor, wide, children, }: { id: string; delay: 0 | 1 | 2 | 3; iconBg: string; icon: React.ReactNode; title: string; body: string; blobColor: string; wide?: boolean; children?: React.ReactNode; }) { const reveal = useReveal(); const hover = useHoverLift(5); return (

{title}

{body}

{children} ); } function Features() { const reveal = useReveal(); return (

Everything you need Built for the space between awake and asleep Each tool in Hush is designed for that specific liminal hour — gentle enough that it never overstimulates, precise enough that it actually works.

} title="Breathing Exercises" body="Box breathing for focus, 4-7-8 for sleep onset, resonance breathing for your nervous system. Each pattern is guided by the soft pacer — no counting required." blobColor="#e8b9a3" /> } title="Sleep Stories" body="Slow, deliberately paced narrations — a walk through a rain-soaked forest in Kyoto, a night train crossing the Loire. Read by real humans, never synthesised voices." blobColor="#a8c0a4" /> } title="Wind-down Soundscapes" body="Layered ambient audio — soft rain against glass, a distant harbour, cicadas in warm grass. Twelve environments, infinitely looping without the ear noticing the seam." blobColor="#f2d4c5" /> } title="Gentle Wake" body="Hush monitors your lightest sleep phase in the 30-minute window before your alarm and wakes you at the optimal moment — a slow volume rise of birdsong or soft piano, never a jolt." blobColor="#a8c0a4" wide >

Wind-down in progress

7:23 remaining

); } /* ──────────────────────────────────────────────────────────────────────── Testimonial ──────────────────────────────────────────────────────────────────────── */ function Testimonial() { const reveal = useReveal(); return (

{Array.from({ length: 5 }).map((_, i) => ( ))}

What our listeners say

"I used to lie awake for 45 minutes just dreading the next day. Hush gave me something to actually do with that time. The breathing pacer changed everything — I'm out in under fifteen minutes now."

); } /* ──────────────────────────────────────────────────────────────────────── Pricing ──────────────────────────────────────────────────────────────────────── */ const FREE_FEATURES = [ "5 guided breathing exercises", "3 sleep stories (rotating)", "4 soundscapes", "Breathing pacer, always free", ]; const PLUS_FEATURES = [ "Full library — 60+ breathing sessions", "All 80 sleep stories, updated monthly", "12 soundscapes with layer mixing", "Gentle Wake smart alarm", "Sleep journal & rest trends", ]; function Pricing() { const reveal = useReveal(); const hover = useHoverLift(4); return (

Pricing Start free. Stay as long as you like. Good sleep shouldn't require a commitment. Begin with the essentials tonight, and upgrade when you're ready for the full library.

{/* Free */}

Free

forever

{/* Plus */} Most loved

Hush Plus

$6.99

per month, billed annually

); } /* ──────────────────────────────────────────────────────────────────────── CTA banner ──────────────────────────────────────────────────────────────────────── */ function CTABanner() { const reveal = useReveal(); return (

One last breath Tonight could feel
very different Download Hush and try a 5-minute breathing session before you close your eyes. No account needed to start.

); } /* ──────────────────────────────────────────────────────────────────────── Footer ──────────────────────────────────────────────────────────────────────── */ function FooterSection() { const footerLinkClass = `text-[0.9rem] text-[#6b5f57] transition-colors duration-150 ease-linear hover:text-[#3a322c] ${FOCUS_RING}`; const legalLinkClass = `text-[0.82rem] text-[#9b8e86] transition-colors duration-150 ease-linear hover:text-[#3a322c] ${FOCUS_RING}`; return ( ); } /* ──────────────────────────────────────────────────────────────────────── Root ──────────────────────────────────────────────────────────────────────── */ export function Hush() { return (

); } export default Hush;

More from the library

Lucenne

Aerlume

Amaranth Bakehouse