UI Components

Effect components that follow the theme: gradients, spotlights, reveals, marquees.

The UI kit

components/ui/ ships zero-dependency effect components. Each derives its colours from the active DaisyUI theme, so they re-skin when config/theme.js changes, and every animation respects prefers-reduced-motion.

import {
  GradientText,        // animated gradient headline text
  ShinyText,           // light sweep across text
  SpotlightCard,       // card glow that follows the cursor
  Reveal,              // fade and slide in on scroll, with stagger
  Marquee,             // infinite loop for logos or quotes
  AnimatedBackground,  // hero effects: grid3d | aurora | dots
  Eyebrow,             // the [BRACKETED] section label
  Logo,
  Magnetic,            // button that leans toward the cursor
  CountUp,             // number that counts up when visible
} from "@/components/ui";

Reveal and SpotlightCard

Stagger cards with an increasing delay:

{features.map((f, i) => (
  <Reveal key={i} delay={i * 90}>
    <SpotlightCard className="p-6">
      <h3>{f.name}</h3>
      <p>{f.description}</p>
    </SpotlightCard>
  </Reveal>
))}

AnimatedBackground

Drop inside any relative section. With no props it uses the effect from your vibe preset; pass variant to force one.

<section className="relative overflow-hidden py-32">
  <AnimatedBackground variant="aurora" />
  <div className="relative z-10">...</div>
</section>

CSS building blocks

Class-based effects in styles/globals.css: - .ww-display: display type that follows the vibe (case and tracking) - .ww-eyebrow: the bracketed section label - .ww-card: vibe-aware card surface (sharp, glass or hairline) - .btn-glow: primary-colour halo for primary buttons - .ww-border-glow: rotating gradient border, used on the featured plan - .text-gradient: static gradient text