Anatomy of Encrypted Card

How a radial mask and a re-scrambling glyph stream turn a static card into a live ciphertext reveal that follows the pointer.

↓Scroll to step through it

Stream under, content over

EncryptedCard keeps a full glyph field painted underneath the content and reveals it through a soft radial mask centered on the pointer. The ciphertext never moves across the surface. The effect is two layers, one CSS variable pair, and an interval that runs only while you hover.

The root is a group relative overflow-hidden card. An absolute, aria-hidden glyph layer fills the inset with STREAM_LEN (1500) characters drawn from DEFAULT_CHARS. Children sit in a sibling at z-raised, so real content never fights the stream for stacking order.

The stream is filled client-side on mount so SSR markup stays deterministic: randomString never runs during the first server render.

The reveal is a mask, not a clip of content

Pointer position never moves the glyphs. onPointerMove writes --x and --y as pixel offsets from the card's bounding rect; the stream's mask-image is a radial gradient whose center reads those variables (and --reveal for radius). Defaults are 50% / 50%, so the first paint doesn't flash from a corner.

Opacity is separate from the mask: the stream starts at opacity-0 and fades to --stream-opacity on group-hover over 300ms. The mask only decides where the faded-in stream is visible.

Scramble only while hovered

While hovered is true and reduced motion is off, a setInterval re-rolls the entire 1500-character string every speed ms (default 55). Leaving the card clears the interval; entering starts it again. The ciphertext keeps changing under the spotlight, and no timer runs while the card is idle.

The result

Hover the card and move across it. The spotlight and the scramble are the two mechanisms described above.

One glyph field, one radial mask on --x/--y, and an interval that only lives for the length of the hover.

01/04Stream under, content over

Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%

Glyph stream: absolute inset-0 · STREAM_LEN 1500 · aria-hidden
Content: relative z-raised, so children stay on top

tsx

<div className="group relative overflow-hidden …"><div aria-hidden className={STREAM_BASE} style={{ color: streamColor }}>  {stream}</div><div className="relative z-raised">{children}</div></div>

Anatomy of Encrypted Card

How a radial mask and a re-scrambling glyph stream turn a static card into a live ciphertext reveal that follows the pointer.

01/04Stream under, content over

Glyph stream: absolute inset-0 · STREAM_LEN 1500 · aria-hidden
Content: relative z-raised, so children stay on top

tsx

<div className="group relative overflow-hidden …"><div aria-hidden className={STREAM_BASE} style={{ color: streamColor }}>  {stream}</div><div className="relative z-raised">{children}</div></div>

Stream under, content over

The stream is filled client-side on mount so SSR markup stays deterministic: randomString never runs during the first server render.

02/04The reveal is a mask, not a clip of content

Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%

mask-image: radial-gradient(var(--reveal) circle at var(--x) var(--y), #000, transparent)

Stream (full): always painted · opacity gated by group-hover
Radial mask: #000 inside → transparent outside · reveals, doesn't hide

tsx

el.style.setProperty("--x", `${e.clientX - rect.left}px`);el.style.setProperty("--y", `${e.clientY - rect.top}px`);// STREAM_BASE includes:// [mask-image:radial-gradient(var(--reveal) circle at var(--x,50%) var(--y,50%),#000_0%,transparent_100%)]

The reveal is a mask, not a clip of content

Opacity is separate from the mask: the stream starts at opacity-0 and fades to --stream-opacity on group-hover over 300ms. The mask only decides where the faded-in stream is visible.

03/04Scramble only while hovered

One9y1Xbz}X2b<RPA7r%I%lriXR/PxoY&Rd%jGi*%ZAH4>Vz1Oxwi<cz$ZT]R3fpm#Itv}4Fd9*Y]UBSF14lDK]%gZdHvLjgDAn]9fLBWHYQ&JtqA/MAZ{PZl0S$il%SkFdAjJ6wAeaNRt>i77Ldo*Pe1QwbMqikFwH*lEc7WEQ7b]*xmhUQ{0**2eoqhZQej}6awHJlXVfhqTlz1&jYQ[r6kk[Lf%Mtd>]MpOTT/PgGC{Uwt%7bRJ$2r8xj5a$%<*h1xTZbtUZo5niorEqA{Ap5hg560Ll}Xu&$f0<Z[tpyF6ZrnhwQZk7j35ySqSRiJu7l<&$mLDv%M42]cn*6M89&DH[7K9a8vM]YbfTvAz1{kboFP0*nwTU8vyUlAuy$V2eh/91r9DQTPAp1O0Jc}sD*xKPQDR1CuPp$&7e8DlI#9c3JX{aguQgEcxn/AxmqTHEDT>VGrvJPOQp%dY/VxfWlAvW$CA*aNhDhJru2V/hHxmaMngsKwc4dPhLQ9n1Om1*Cb3XFUel1v#3%hbK}NoqNsJYe}SDAqb}%MuliurQk00D}TdW>kH>Mm%j<q>U]nd$<I25Rg21Cai#DBUz5xMY9um%qd[oEvrTaL3#r#qXTV/wg]9IR&]kyW&K>ya$2YVfk}lbWoGDUgfkPv$J6#MeyG2IGgST98Zd0zKX%jMKgHTW6xavKipG3hMoPjKa35U$uPF4eq%iZC%3MhR/II39&8yBa78gZn7uia2qWk/Dkb6UvjZnCC2PYS>Mbf6/$SIHpHOElr$kw>aXx]m2&ATFmGub3a%4#JlGZwWHak#>0orgmG{flIAozCQ{oUu9#i/*$tGDkiTevRbnB17qi9S[S4#{%xxh[nd*a>afvqhQdBpG7wwp6U1%kI8zT4Rv1G*wbG8AhuUkw2O]hb[cAHgVMRg{J*X#BrMO0u#%MMXiBmiSIZN[d/X>/RGC5ERP}eixiqx>EdvJver3K72V2T>5#YA&5J0#JsqmkC492Wsk1&]SiQGi3[2%ci[3xcQOO6zlaVF%IkI7$6876zlb>ctL%vdKN[wbh{bvvtfF#CNqJ5T2ZrxB5U6C<ep7]ggGXXqb6Z]$TC9n#iwNywXgnbr3n&d3526PghCVSBqO/V*YxqMsGueEN<vx&HZ{EyM0}&Sn9kd$7ecdaij[c1DIG858}QpTdMS>iX50%yO4r7q/BEm{{K/Ke$i]{qn22iF7LF[g[[K41hp{%*R7Co6TcikR*n<nX028mMxxk&4YjPZtFpQx<Y1$}8<vDPodC8ELW#&eFVZBfggC]PM<n[Q3iiC&GF48s3IKOu3shXgXH}Z<71r12l5rBXkX3mqAaCbM[RL6LcB7pqtz#HtUxk7&jEWPS$A6TS2y$Kc>1r6]RU/csMNDLTyA/hzoq&uchFW2Cim$WQL[WaW*FifWGAH#oG8I<j1CCcim[>dEjZbjrKz8WQDLqtpZX5&578NMuIQyi1z/7AqdpsYm&D&jcHAbk%LCeTpCz

setInterval(() => setStream(randomString(1500, chars)), speed)

Opacity in: 300ms ease · group-hover:[opacity:var(--stream-opacity)]
Re-randomize: setInterval(speed) · default 55ms · glyphs change, opacity steady

tsx

React.useEffect(() => {setStream(randomString(STREAM_LEN, characters));if (reduced || !hovered) return;const id = window.setInterval(() => {  setStream(randomString(STREAM_LEN, characters));}, speed);return () => window.clearInterval(id);}, [characters, speed, hovered, reduced]);

Scramble only while hovered

04/04Result

Production API key

rotated 3 days ago

Live

sk_live_51Nc••••••••4Rf2

AES-256-GCM at restSOC 2

The result

Hover the card and move across it. The spotlight and the scramble are the two mechanisms described above.

One glyph field, one radial mask on --x/--y, and an interval that only lives for the length of the hover.

Reduced motion

Under prefers-reduced-motion, the stream still paints and the mask still tracks, so the ciphertext stays visible. The interval never starts, and motion-reduce:[transition:none] removes the 300ms opacity fade.

tsx

const reduced = usePrefersReducedMotion();
// …interval skipped when reduced || !hovered
// STREAM_BASE: motion-reduce:[transition:none]

Motion Score

Encrypted CardSS: Compositor-only

SopacityFade / cross-fadeWorst → grade

Each property is graded by how the browser runs it, from S (composited off the main thread) down to F (layout thrashing); the component takes the worst. MotionScore methodology →