jaredandClaude Fable 5.1
4bea48959e
Arcade: - perspective grid is masked through the central timeline column so it frames the chat instead of striping messages; lower opacity, thinner non-scaling strokes (also fixes the grid vanishing in the 76px swatch) - neon horizon line is broken through the middle so it never underlines a message; softer sun glow - "1UP" score + "INSERT COIN" moved from top-left/bottom-centre (space bar / composer) to a single bottom-right HUD stack; font-size clamps to 0 via cqw inside the settings swatch so no more clipped glyphs - scanlines: 4px pitch at lower opacity (light theme was fully striped); ambient wash slightly lighter Deep Space: - starfield 28 → 62 stars across the two parallax layers - base violet wash slightly lighter for light themes SeasonalPreview wrapper is now a size container (container-type) so overlays can scale/hide fixed-px details with cqw. LOTUS_FEATURES.md theme table now describes what both overlays actually render. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
417 lines
17 KiB
TypeScript
417 lines
17 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { SeasonalOverlayProps } from '../types';
|
|
import {
|
|
animGridScroll,
|
|
animScanRoll,
|
|
animScreenGlow,
|
|
animCrtFlicker,
|
|
animChromaShift,
|
|
animSparkleDrift,
|
|
animSparkleTwinkle,
|
|
animCoinBlink,
|
|
animScoreBlip,
|
|
} from './Arcade.css';
|
|
|
|
/**
|
|
* ArcadeOverlay — retro synthwave CRT.
|
|
*
|
|
* A full-screen, pointer-events:none ambient decoration. The parent supplies a
|
|
* fixed inset:0 overflow:hidden pointer-events:none container at the correct
|
|
* z-index, so this component only returns absolutely-positioned aria-hidden
|
|
* children and never sets position:fixed / z-index / pointer-events.
|
|
*
|
|
* Composition (back to front):
|
|
* 1. near-black synthwave ambient wash (magenta sky-glow up top, cyan/purple
|
|
* pool toward the floor) — layered oklch gradients for depth
|
|
* 2. a neon perspective grid receding to a vanishing point on the horizon,
|
|
* scrolling toward the viewer via transform translateY (never bg-position)
|
|
* 3. a soft horizon sun-glow + thin neon horizon line where the grid meets sky
|
|
* 4. drifting pixel sparkles / neon coin-burst specks rising off the grid
|
|
* 5. fine CRT scanlines, gently rolling
|
|
* 6. a faint chromatic-aberration fringe at the screen edges
|
|
* 7. a glowing "INSERT COIN" blip + a corner SCORE HUD glyph
|
|
* 8. a CRT vignette + screen-glow that frames and protects central text
|
|
*
|
|
* All motion is transform/opacity only (compositor-friendly). When `reduced` is
|
|
* true we render a static-but-gorgeous scene: a still neon grid, steady
|
|
* scanlines + vignette, and a steady "INSERT COIN" — no `animation` anywhere,
|
|
* no flicker. The settings preview always passes reduced=true, so the still
|
|
* form stands on its own.
|
|
*/
|
|
|
|
// Synthwave neon palette in oklch. Saturated where it glows, but every layer is
|
|
// held at low opacity so it tints rather than takes over the chat beneath.
|
|
const NEON_MAGENTA = 'oklch(0.65 0.25 350)';
|
|
const NEON_CYAN = 'oklch(0.80 0.15 200)';
|
|
const GRID_PURPLE = 'oklch(0.45 0.18 300)';
|
|
|
|
// The receding grid as an inline SVG data-URI (CSP-safe, no external assets).
|
|
// Strokes use vector-effect=non-scaling-stroke so a line is ~1px whether the
|
|
// tile is stretched across a 2000px plane (preserveAspectRatio=none would
|
|
// otherwise fatten the verticals ~4x) or squeezed into the 76px settings
|
|
// swatch (where scaled strokes disappeared entirely).
|
|
// It is a 1x2 vertical tile of horizontal rule lines + a single set of vertical
|
|
// lines fanning toward a top-center vanishing point. The plane is then placed
|
|
// under a CSS `perspective` rotateX so the lines genuinely recede. Scrolling the
|
|
// tile up by one tile-height (animGridScroll → translateY 50%) loops seamlessly.
|
|
function gridDataUri(): string {
|
|
const lines: string[] = [];
|
|
// Horizontal rules — denser toward the top (the horizon) for a perspective
|
|
// feel even before the CSS rotateX is applied.
|
|
const rows = [0, 16, 34, 54, 76, 100, 126, 156, 190, 228, 270, 316, 366, 420, 478, 540];
|
|
rows.forEach((y) => {
|
|
lines.push(
|
|
`<line x1='0' y1='${y}' x2='600' y2='${y}' stroke='${GRID_PURPLE}' ` +
|
|
`stroke-width='1.2' stroke-opacity='0.9' vector-effect='non-scaling-stroke'/>`,
|
|
);
|
|
});
|
|
// Vertical lines fanning out from the top-center vanishing point.
|
|
for (let i = -7; i <= 7; i += 1) {
|
|
const topX = 300 + i * 6; // tight near the horizon
|
|
const botX = 300 + i * 95; // wide at the foreground
|
|
lines.push(
|
|
`<line x1='${topX}' y1='0' x2='${botX}' y2='600' stroke='${GRID_PURPLE}' ` +
|
|
`stroke-width='1.2' stroke-opacity='0.8' vector-effect='non-scaling-stroke'/>`,
|
|
);
|
|
}
|
|
const svg =
|
|
`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' ` +
|
|
`preserveAspectRatio='none'>${lines.join('')}</svg>`;
|
|
return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
|
|
}
|
|
|
|
type Sparkle = {
|
|
left: number; // vw
|
|
bottom: number; // % up from floor where it spawns
|
|
size: number; // px
|
|
duration: number; // s
|
|
delay: number; // s
|
|
twinkle: number; // s
|
|
hue: 'magenta' | 'cyan';
|
|
opacity: number;
|
|
};
|
|
|
|
// Hand-placed still sparkles for the reduced/static scene — a few neon specks
|
|
// resting low over the grid, away from the busy chat center.
|
|
const RESTING_SPARKLES: ReadonlyArray<{
|
|
left: number;
|
|
bottom: number;
|
|
size: number;
|
|
hue: 'magenta' | 'cyan';
|
|
opacity: number;
|
|
}> = [
|
|
{ left: 12, bottom: 18, size: 4, hue: 'cyan', opacity: 0.5 },
|
|
{ left: 26, bottom: 30, size: 3, hue: 'magenta', opacity: 0.42 },
|
|
{ left: 78, bottom: 22, size: 4, hue: 'magenta', opacity: 0.5 },
|
|
{ left: 88, bottom: 34, size: 3, hue: 'cyan', opacity: 0.4 },
|
|
{ left: 50, bottom: 14, size: 3, hue: 'cyan', opacity: 0.38 },
|
|
];
|
|
|
|
const GRID_URI = gridDataUri();
|
|
|
|
// HUD text size: 11px on any real viewport, 0px (invisible) inside anything
|
|
// narrower than ~330px. `cqw` resolves against the nearest size container —
|
|
// the settings swatch (`SeasonalPreview` sets container-type) — and falls back
|
|
// to the viewport width when there is no container, i.e. the full-screen
|
|
// overlay. clamp(0, 100cqw - 320px, 11px) → 76px swatch: 0px; 1440px app: 11px.
|
|
const HUD_FONT_SIZE = 'clamp(0px, calc(100cqw - 320px), 11px)';
|
|
|
|
export function ArcadeOverlay({ reduced }: SeasonalOverlayProps) {
|
|
// Deterministic sparkle field, computed ONCE. No per-frame state.
|
|
const sparkles = useMemo<Sparkle[]>(() => {
|
|
const COUNT = 16;
|
|
return Array.from({ length: COUNT }, (_, i) => ({
|
|
left: (i * 6.27 + 4) % 100,
|
|
bottom: (i * 3.7) % 28, // spawn in the lower third (over the grid)
|
|
size: 2 + (i % 3), // 2..4 px pixels
|
|
duration: 14 + (i % 6) * 2.2,
|
|
delay: -((i * 1.83) % 16),
|
|
twinkle: 1.4 + (i % 4) * 0.5,
|
|
hue: i % 2 === 0 ? 'cyan' : 'magenta',
|
|
opacity: 0.45 + (i % 3) * 0.12,
|
|
}));
|
|
}, []);
|
|
|
|
const sparkleColor = (hue: 'magenta' | 'cyan') => (hue === 'cyan' ? NEON_CYAN : NEON_MAGENTA);
|
|
|
|
return (
|
|
<>
|
|
{/* 1. Near-black synthwave ambient wash. Magenta sky-glow up top, a
|
|
cyan/purple pool toward the floor, and an overall dark vertical
|
|
grade. Layered oklch gradients give depth at very low opacity. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
backgroundImage: [
|
|
'radial-gradient(140% 80% at 50% -8%, oklch(0.65 0.25 350 / 0.12) 0%, transparent 55%)',
|
|
'radial-gradient(120% 70% at 50% 112%, oklch(0.45 0.18 300 / 0.16) 0%, transparent 60%)',
|
|
'linear-gradient(180deg, oklch(0.12 0.05 300 / 0.08) 0%, transparent 38%, oklch(0.10 0.06 310 / 0.12) 100%)',
|
|
].join(','),
|
|
contain: 'layout paint style',
|
|
}}
|
|
/>
|
|
|
|
{/* 2. The neon perspective grid. A wide, tall plane is tilted away from
|
|
the viewer with `perspective` + rotateX so its rule lines recede to
|
|
a vanishing point at the top (the horizon). It lives in the lower
|
|
half of the screen — the "floor". The inner plane scrolls upward by
|
|
one tile via transform translateY, which reads as the grid flowing
|
|
toward the viewer. Pure transform; never background-position.
|
|
|
|
Two masks are nested (multiple mask-images on one element union by
|
|
default, and `mask-composite: intersect` isn't universal yet): the
|
|
outer wrapper fades the lattice through the central column where the
|
|
message timeline lives, so it frames the chat instead of striping
|
|
the text; the inner box fades it in from the horizon. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
maskImage:
|
|
'linear-gradient(90deg, #000 0%, #000 12%, rgba(0,0,0,0.3) 34%, rgba(0,0,0,0.3) 66%, #000 88%, #000 100%)',
|
|
WebkitMaskImage:
|
|
'linear-gradient(90deg, #000 0%, #000 12%, rgba(0,0,0,0.3) 34%, rgba(0,0,0,0.3) 66%, #000 88%, #000 100%)',
|
|
opacity: reduced ? 0.4 : 0.46,
|
|
contain: 'layout paint style',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
left: '-25%',
|
|
right: '-25%',
|
|
bottom: 0,
|
|
height: '62%',
|
|
overflow: 'hidden',
|
|
perspective: '280px',
|
|
perspectiveOrigin: '50% 0%',
|
|
maskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 100%)',
|
|
WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, #000 26%, #000 100%)',
|
|
contain: 'layout paint style',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
height: '200%',
|
|
transformOrigin: 'top center',
|
|
transform: 'rotateX(74deg)',
|
|
backgroundImage: GRID_URI,
|
|
backgroundRepeat: 'repeat-y',
|
|
backgroundSize: '100% 50%',
|
|
filter: 'drop-shadow(0 0 2px oklch(0.55 0.22 320 / 0.55))',
|
|
willChange: reduced ? undefined : 'transform',
|
|
animation: reduced ? 'none' : `${animGridScroll} 7s linear infinite`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 3. Horizon glow + neon horizon line. A soft synthwave sun-bloom sits
|
|
where the grid meets the sky, with a thin bright rule on top of it
|
|
to seal the vanishing point. Static (no motion) either way. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
left: '50%',
|
|
top: '38%',
|
|
width: '70%',
|
|
height: '34%',
|
|
transform: 'translate(-50%, -50%)',
|
|
backgroundImage:
|
|
'radial-gradient(60% 100% at 50% 100%, oklch(0.70 0.22 350 / 0.16) 0%, oklch(0.65 0.18 330 / 0.08) 40%, transparent 72%)',
|
|
contain: 'layout paint style',
|
|
}}
|
|
/>
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
left: '12%',
|
|
right: '12%',
|
|
top: '38%',
|
|
height: '1.5px',
|
|
// Bright at the flanks, dropped out through the centre column so the
|
|
// rule frames the timeline rather than underlining a message.
|
|
background: `linear-gradient(90deg, transparent 0%, ${NEON_CYAN} 14%, oklch(0.92 0.10 320 / 0.95) 22%, transparent 34%, transparent 66%, oklch(0.92 0.10 320 / 0.95) 78%, ${NEON_CYAN} 86%, transparent 100%)`,
|
|
opacity: 0.4,
|
|
filter: 'blur(0.4px) drop-shadow(0 0 4px oklch(0.78 0.16 200 / 0.7))',
|
|
}}
|
|
/>
|
|
|
|
{/* 4. Drifting pixel sparkles / neon coin-burst specks. Tiny square
|
|
neon pixels rising off the grid and twinkling. The static scene uses
|
|
a small resting set instead. */}
|
|
{reduced
|
|
? RESTING_SPARKLES.map((s, i) => (
|
|
<div
|
|
key={`rest-spark-${i}`}
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${s.left}%`,
|
|
bottom: `${s.bottom}%`,
|
|
width: `${s.size}px`,
|
|
height: `${s.size}px`,
|
|
background: sparkleColor(s.hue),
|
|
opacity: s.opacity,
|
|
boxShadow: `0 0 6px ${sparkleColor(s.hue)}`,
|
|
}}
|
|
/>
|
|
))
|
|
: sparkles.map((s, i) => (
|
|
<div
|
|
key={`spark-${i}`}
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
left: `${s.left}%`,
|
|
bottom: `${s.bottom}%`,
|
|
width: `${s.size}px`,
|
|
height: `${s.size}px`,
|
|
willChange: 'transform, opacity',
|
|
animation: `${animSparkleDrift} ${s.duration}s linear ${s.delay}s infinite`,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
background: sparkleColor(s.hue),
|
|
opacity: s.opacity,
|
|
boxShadow: `0 0 6px ${sparkleColor(s.hue)}`,
|
|
animation: `${animSparkleTwinkle} ${s.twinkle}s step-end infinite`,
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
|
|
{/* 5. Fine CRT scanlines. A repeating 1px dark rule field over the whole
|
|
screen, gently rolling downward on the compositor (transform only).
|
|
Held faint so text stays crisp. The pattern is in a child taller
|
|
than the frame so the roll never reveals an edge. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
overflow: 'hidden',
|
|
mixBlendMode: 'multiply',
|
|
opacity: 0.32,
|
|
contain: 'layout paint style',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: '-8px',
|
|
bottom: '-8px',
|
|
backgroundImage:
|
|
'repeating-linear-gradient(0deg, oklch(0.10 0.04 300 / 0.45) 0px, oklch(0.10 0.04 300 / 0.45) 1px, transparent 1px, transparent 4px)',
|
|
willChange: reduced ? undefined : 'transform',
|
|
animation: reduced ? 'none' : `${animScanRoll} 6s linear infinite`,
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* 6. Chromatic-aberration fringe. Two thin edge-glows — magenta and cyan —
|
|
offset a sub-pixel apart at the screen border so the frame shimmers
|
|
with an RGB split, like a misconverged tube. Animated only; in the
|
|
static scene it sits as a steady fringe. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
boxShadow: `inset 2px 0 14px oklch(0.65 0.25 350 / 0.16), inset -2px 0 14px oklch(0.80 0.15 200 / 0.16)`,
|
|
opacity: reduced ? 0.6 : undefined,
|
|
willChange: reduced ? undefined : 'transform, opacity',
|
|
contain: 'layout paint style',
|
|
animation: reduced ? 'none' : `${animChromaShift} 4.5s ease-in-out infinite`,
|
|
}}
|
|
/>
|
|
|
|
{/* 7. Attract-mode HUD: a tiny SCORE readout over a glowing "INSERT COIN"
|
|
blip, stacked bottom-right. That corner is the one spot that is
|
|
clear in every layout (below the members list, or the empty right
|
|
end of the read-receipt strip) — top-left collided with the space
|
|
bar and bottom-centre sat on the composer. Static scene shows both
|
|
steady (no blink). The font-size clamp collapses the text to nothing
|
|
when the host is narrower than ~330px, so the 76px settings swatch
|
|
never shows clipped glyphs. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
right: '14px',
|
|
bottom: '8px',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-end',
|
|
gap: '3px',
|
|
fontFamily: '"Courier New", monospace',
|
|
fontSize: HUD_FONT_SIZE,
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
userSelect: 'none',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
letterSpacing: '0.18em',
|
|
color: NEON_MAGENTA,
|
|
textShadow: '0 0 6px oklch(0.65 0.25 350 / 0.8)',
|
|
opacity: reduced ? 0.5 : undefined,
|
|
animation: reduced ? 'none' : `${animScoreBlip} 2.4s ease-in-out infinite`,
|
|
}}
|
|
>
|
|
1UP 00<span style={{ color: NEON_CYAN }}>0000</span>
|
|
</div>
|
|
<div
|
|
style={{
|
|
letterSpacing: '0.32em',
|
|
color: NEON_CYAN,
|
|
textShadow: '0 0 6px oklch(0.80 0.15 200 / 0.9), 0 0 14px oklch(0.65 0.25 350 / 0.5)',
|
|
opacity: reduced ? 0.6 : undefined,
|
|
animation: reduced ? 'none' : `${animCoinBlink} 1.6s step-end infinite`,
|
|
}}
|
|
>
|
|
INSERT COIN
|
|
</div>
|
|
</div>
|
|
|
|
{/* 8. CRT vignette + screen-glow. A radial darkening frames the corners,
|
|
with a faint magenta tube-glow swell. The vignette protects central
|
|
chat-text contrast. Static scene holds it steady; live scene adds a
|
|
shallow breathing glow + irregular flicker, both opacity-only. */}
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
backgroundImage: [
|
|
'radial-gradient(125% 95% at 50% 46%, oklch(0.72 0.18 340 / 0.05) 0%, transparent 40%)',
|
|
'radial-gradient(120% 115% at 50% 50%, transparent 50%, oklch(0.10 0.05 310 / 0.20) 84%, oklch(0.06 0.04 305 / 0.34) 100%)',
|
|
].join(','),
|
|
contain: 'layout paint style',
|
|
opacity: reduced ? 1 : undefined,
|
|
willChange: reduced ? undefined : 'opacity',
|
|
animation: reduced
|
|
? 'none'
|
|
: `${animScreenGlow} 8s ease-in-out infinite, ${animCrtFlicker} 5.5s steps(1, end) infinite`,
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|