or container — words fade-up in stagger * data-clip-reveal on a heading — clip-path reveals on enter * data-spotlight on a panel — cursor-following soft glow * data-stagger-list on a container — direct children stagger in * data-tilt-soft on a panel — gentle 3D tilt following cursor * data-magnetic-soft on a small element — soft magnetic follow * data-shimmer on inline text — accent-gradient shimmer * data-section-ray on a

— top-edge sweeping ray on enter * data-velocity-fade on an element — opacity dips on Lenis scroll velocity * * The accompanying rich.js wires up all the JS-driven systems (Lenis + * pointer-light + orbs + ticker + IO observers). * ====================================================================== */ /* Default accent — used only if a page forgets to set its own. */ :root { --rich-accent: #d4ff3a; --rich-accent-rgb: 212, 255, 58; } /* ----- Lenis html-level setup ----- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* ============ Pointer-tracking ambient light (desktop only) ============ */ .rich-pointer-light { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( 420px circle at var(--rich-px, 50%) var(--rich-py, 50%), rgba(var(--rich-accent-rgb), 0.10), transparent 55% ); mix-blend-mode: screen; opacity: 0.85; } /* ============ Floating ambient gradient orbs ============ */ .rich-orb-stage { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .rich-orb { position: absolute; width: 480px; height: 480px; border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: 0.32; will-change: transform; } .rich-orb--a { background: radial-gradient(circle, rgba(var(--rich-accent-rgb), 0.55), transparent 60%); top: -8%; left: -10%; } .rich-orb--b { background: radial-gradient(circle, rgba(var(--rich-accent-rgb), 0.40), transparent 60%); top: 35%; right: -12%; } .rich-orb--c { background: radial-gradient(circle, rgba(212, 255, 58, 0.20), transparent 60%); bottom: -10%; left: 35%; } /* ============ Word-stagger reveal ============ */ [data-stagger-words] .rich-word { display: inline-block; opacity: 0; transform: translateY(0.5em); filter: blur(6px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity, filter; } [data-stagger-words] .rich-word.is-in { opacity: 1; transform: translateY(0); filter: blur(0); } [data-stagger-words] .rich-word-space { display: inline-block; width: 0.28em; } /* ============ Clip-path reveal ============ */ [data-clip-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(0.85, 0, 0.15, 1); will-change: clip-path; } [data-clip-reveal].is-in { clip-path: inset(0 0% 0 0); } /* ============ Cursor-spotlight on panels ============ */ [data-spotlight] { position: relative; } [data-spotlight]::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 340px circle at var(--rich-sx, -200px) var(--rich-sy, -200px), rgba(var(--rich-accent-rgb), 0.45), transparent 60% ); opacity: 0; transition: opacity 0.3s ease; border-radius: inherit; mix-blend-mode: screen; z-index: 10; } [data-spotlight].is-hot::before { opacity: 1; } /* ============ Stagger-list ============ * Uses CSS animation (not transition) so we don't clobber any transition * the page's own CSS already has on these children (e.g., `transition: padding` * for hover effects). animation-fill-mode: forwards keeps the final state. */ [data-stagger-list] > * { opacity: 0; transform: translateY(8px); } [data-stagger-list] > *.is-revealed { animation: richListReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes richListReveal { to { opacity: 1; transform: translateY(0); } } /* ============ Tilt-soft (no CSS state — JS sets transform) ============ */ [data-tilt-soft] { transform-style: preserve-3d; will-change: transform; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* ============ Shimmer ============ */ [data-shimmer] { background: linear-gradient( 100deg, var(--rich-accent) 0%, #fff 50%, var(--rich-accent) 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: richShimmer 6s linear infinite; } @keyframes richShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============ Section ray (sweeps once on first entry) ============ */ [data-section-ray] { position: relative; } [data-section-ray]::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--rich-accent-rgb), 0.10) calc(var(--rich-ray, 0) * 1%), rgba(var(--rich-accent-rgb), 0.55) calc(var(--rich-ray, 0) * 1% + 8%), rgba(var(--rich-accent-rgb), 0.10) calc(var(--rich-ray, 0) * 1% + 16%), transparent 100%); pointer-events: none; } @property --rich-ray { syntax: ''; inherits: true; initial-value: 0; } /* ============ Magnetic cursor label chip ============ * Floating chip element appended to by rich.js. Tracks the cursor * with smoothing (JS-driven transform) and morphs in when hovering an * element with [data-cursor-label]. Hidden on touch. */ .rich-cursor-chip { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; padding: 6px 12px 7px; font: 600 11px/1 'Inter', 'Helvetica Neue', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #0a0a0c; background: var(--rich-accent, #d4ff3a); border-radius: 999px; box-shadow: 0 8px 24px rgba(var(--rich-accent-rgb, 212,255,58), 0.35), 0 0 0 1px rgba(0,0,0,0.06) inset; opacity: 0; transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; transform-origin: 50% 100%; will-change: transform, opacity; } .rich-cursor-chip.is-on { opacity: 1; } [data-cursor-label] { cursor: none; } /* ============ Nav scroll-morphing ============ * The auto-detected top nav (or one tagged with data-rich-nav) gets * .rich-nav from JS. After 80px scroll it gains .is-scrolled — which we * style here with a backdrop blur + tighter padding + dark-translucent bg. * Padding is animated via CSS variables so per-page nav padding still wins * outside .is-scrolled state. */ .rich-nav { transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, box-shadow 0.4s ease; } .rich-nav.is-scrolled { background-color: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 40px -20px rgba(0, 0, 0, 0.6); } .rich-nav.is-scrolled.rich-nav { padding-top: 10px; padding-bottom: 10px; } /* ============ Sticky stacking cards ============ * Hook: [data-stack-cards] container with arbitrary direct children. * Each child becomes sticky and offsets by --i * a small step so cards * stack as the user scrolls past them. Container needs enough scroll * height (the children's natural stacked height handles this). */ [data-stack-cards] { display: flex; flex-direction: column; gap: 24px; } [data-stack-cards] .rich-stack-card { position: sticky; top: calc(var(--rich-stack-offset, 64px) + var(--i, 0) * 12px); will-change: transform; } /* ============ Section background tone drift ===== * No CSS rule needed — JS sets body bg directly. We just nudge the body * transition so non-scroll mutations (e.g., theme toggles) feel smooth. */ body { transition: background-color 0.6s ease; } /* ============ Mobile / tablet — disable expensive cursor effects ============ * Touch devices have no cursor, so any pointer-light / spotlight / tilt / * magnetic effect is wasted CPU. The static reveals still apply. */ @media (pointer: coarse), (hover: none) { .rich-pointer-light { display: none; } [data-spotlight]::before { display: none; } [data-tilt-soft] { transform: none !important; } .rich-cursor-chip { display: none; } [data-cursor-label] { cursor: auto; } } /* On narrow viewports, sticky stacking can fight short content — relax * to a normal flow so cards don't collapse into one another. */ @media (max-width: 720px) { [data-stack-cards] .rich-stack-card { position: static; top: auto; } } /* Smaller orbs on tablets, hide on phones (perf budget) */ @media (max-width: 1024px) { .rich-orb { width: 320px; height: 320px; filter: blur(48px); opacity: 0.28; } } @media (max-width: 720px) { .rich-orb-stage { display: none; } .rich-pointer-light { display: none; } } /* ============ Reduced motion — respect ============ */ @media (prefers-reduced-motion: reduce) { [data-shimmer] { animation: none; -webkit-text-fill-color: var(--rich-accent); background: none; } .rich-orb-stage, .rich-pointer-light { display: none; } [data-stagger-words] .rich-word, [data-clip-reveal], [data-stagger-list] > * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } [data-tilt-soft] { transform: none !important; } .rich-cursor-chip { display: none; } [data-cursor-label] { cursor: auto; } [data-stack-cards] .rich-stack-card { position: static; top: auto; } .rich-logoloop__track { animation: none !important; } body { transition: none; } } /* ============ 21. Logo-loop marquee (ported from React Bits "Logo Loop") ============ */ .rich-logoloop { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .rich-logoloop__track { display: flex; width: max-content; will-change: transform; animation: richLogoLoop linear infinite; } .rich-logoloop:hover .rich-logoloop__track { animation-play-state: paused; } @keyframes richLogoLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============ 22. Aurora WebGL background (ported from React Bits "Aurora") ============ */ .rich-aurora-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Keep an aurora host's own content above the injected canvas. */ [data-aurora] { position: relative; } [data-aurora] > *:not(.rich-aurora-canvas) { position: relative; z-index: 1; }