--- /** * Cover — an inline "warp speed" wrapper for a word or phrase inside a * heading. At rest it is a subtly sparkling pill: a canvas dust field * twinkles behind the text, thin blue beams streak across at staggered * vertical offsets and four corner dots pulse. * * On hover (or keyboard focus) the pill engages warp: it turns dark in * every color scheme, the dust brightens, the beams sweep much faster on * restarted per-beam cycles, the corner dots drop away and the text * tightens to 80% while shaking, so the phrase reads as if it were being * pulled through hyperspace. * * The element is `inline-block`, so drop it straight inside a heading — * remember Astro collapses whitespace around components, so wrap it in * `{' '}` when it sits mid-sentence. Zero dependencies: the dust field is * a small self-contained 2D-canvas engine and every other layer is CSS. */ interface Props { /** * Additional classes for the text element — the same slot the upstream * `className` fills, so typography overrides land on the wrapped words. */ class?: string; } const { class: className } = Astro.props; const uid = `nui-container-cover-${Math.random().toString(36).slice(2, 9)}`; /** Upstream spaces one beam every ~10px of pill height; eight reads the same at heading sizes while staying renderable server-side. */ const BEAM_COUNT = 8; /** Comet length as a percentage of the pill width (upstream: a 5-10% band). */ const COMET_WIDTH = 12; /** Travel that carries the comet from fully off-left to fully off-right. */ const TRAVEL = ((100 / COMET_WIDTH) * 100).toFixed(2); /** Warped sweeps are fixed and fast, exactly like the upstream 0.5s. */ const WARP_SWEEP = 0.5; // Per-beam speed / start delay / pause-before-the-next-sweep, drawn once // here so the whole shower is a set of plain CSS keyframes instead of a // JS animation loop. Every name is unique to this rendered instance. const beams = Array.from({ length: BEAM_COUNT }, (_, index) => { const restSweep = 0.9 + Math.random() * 1.7; const restPause = 1 + Math.random() * 2; const warpPause = 1 + Math.random(); const restTotal = restSweep + restPause; const warpTotal = WARP_SWEEP + warpPause; return { name: `${uid}-b${index}`, top: (((index + 1) * 100) / (BEAM_COUNT + 1)).toFixed(3), restTotal: restTotal.toFixed(2), restActive: ((restSweep / restTotal) * 100).toFixed(2), restDelay: (Math.random() * 2).toFixed(2), warpTotal: warpTotal.toFixed(2), warpActive: ((WARP_SWEEP / warpTotal) * 100).toFixed(2), warpDelay: (0.2 + Math.random() * 0.8).toFixed(2), }; }); /* Each beam sweeps for its own duration, then parks off-frame (already clipped by the track's overflow: hidden) until the cycle restarts — that reproduces Motion's per-beam repeatDelay natively. Swapping the animation-name on hover also restarts the cycle, which is what makes the whole shower re-fire the moment warp engages. */ const css = beams .map( (beam) => `@keyframes ${beam.name}-rest { 0% { transform: translateX(-100%); } ${beam.restActive}% { transform: translateX(${TRAVEL}%); } 100% { transform: translateX(${TRAVEL}%); } } @keyframes ${beam.name}-warp { 0% { transform: translateX(-100%); } ${beam.warpActive}% { transform: translateX(${TRAVEL}%); } 100% { transform: translateX(${TRAVEL}%); } } .${beam.name} { top: ${beam.top}%; } .${beam.name} > i { animation: ${beam.name}-rest ${beam.restTotal}s linear ${beam.restDelay}s infinite; } nular-container-cover:hover .${beam.name} > i, nular-container-cover.is-warp .${beam.name} > i { animation: ${beam.name}-warp ${beam.warpTotal}s linear ${beam.warpDelay}s infinite; }`, ) .join('\n'); /** Corner dots: position modifier plus the upstream stagger, in seconds. */ const corners = [ { place: 'tl', delay: 0.8 }, { place: 'tr', delay: 0 }, { place: 'br', delay: 0.4 }, { place: 'bl', delay: 1.6 }, ]; --- {/* Every layer except the text is out of flow, so the white space this markup introduces around it collapses away at the line edges. */} {/* Per-instance beam keyframes: names are unique per render. */} { corners.map((corner) => ( )) }

Installation

Install dependencies

Add these files

Configuration

Use it