Completed login screen transition, and started the spec work on design file info
This commit is contained in:
+494
@@ -0,0 +1,494 @@
|
||||
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
|
||||
|
||||
// ─── Heartbeat generation ────────────────────────────────────────────────────
|
||||
|
||||
function generateHeartbeatPoints(
|
||||
amplitude: number,
|
||||
): { x: number; y: number }[] {
|
||||
const points: { x: number; y: number }[] = [];
|
||||
const steps = 200;
|
||||
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const t = i / steps;
|
||||
let y = 0;
|
||||
|
||||
if (t >= 0.05 && t < 0.2) {
|
||||
const pt = (t - 0.05) / 0.15;
|
||||
y = 0.12 * Math.sin(pt * Math.PI);
|
||||
} else if (t >= 0.25 && t < 0.32) {
|
||||
const pt = (t - 0.25) / 0.07;
|
||||
y = -0.1 * Math.sin(pt * Math.PI);
|
||||
} else if (t >= 0.32 && t < 0.42) {
|
||||
const pt = (t - 0.32) / 0.1;
|
||||
y = 1.0 * Math.sin(pt * Math.PI);
|
||||
} else if (t >= 0.42 && t < 0.5) {
|
||||
const pt = (t - 0.42) / 0.08;
|
||||
y = -0.25 * Math.sin(pt * Math.PI);
|
||||
} else if (t >= 0.55 && t < 0.75) {
|
||||
const pt = (t - 0.55) / 0.2;
|
||||
y = 0.2 * Math.sin(pt * Math.PI);
|
||||
}
|
||||
|
||||
points.push({ x: t, y: y * amplitude });
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
|
||||
type Beat = { startFrame: number; widthPx: number; amplitude: number };
|
||||
|
||||
function buildBeats(fps: number): Beat[] {
|
||||
const beats: Beat[] = [];
|
||||
beats.push({ startFrame: Math.round(0.6 * fps), widthPx: 60, amplitude: 0.25 });
|
||||
beats.push({ startFrame: Math.round(1.4 * fps), widthPx: 80, amplitude: 0.45 });
|
||||
beats.push({ startFrame: Math.round(2.3 * fps), widthPx: 120, amplitude: 0.85 });
|
||||
const normalStart = 3.2;
|
||||
for (let i = 0; i < 1; i++) {
|
||||
beats.push({
|
||||
startFrame: Math.round((normalStart + i) * fps),
|
||||
widthPx: 140,
|
||||
amplitude: 1.0,
|
||||
});
|
||||
}
|
||||
return beats;
|
||||
}
|
||||
|
||||
// ─── Letter definitions ──────────────────────────────────────────────────────
|
||||
|
||||
const LETTERS: Record<string, { x: number; y: number }[]> = {
|
||||
A: [
|
||||
{ x: 0, y: 0 }, { x: 0.48, y: 1 }, { x: 0.53, y: 0.42 },
|
||||
{ x: 0.6, y: 0.42 }, { x: 1, y: 0 },
|
||||
],
|
||||
N: [
|
||||
{ x: 0, y: 0 }, { x: 0.12, y: 1 }, { x: 0.72, y: 0 },
|
||||
{ x: 0.88, y: 1 }, { x: 1, y: 0 },
|
||||
],
|
||||
D: [
|
||||
{ x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.5, y: 1 },
|
||||
{ x: 0.85, y: 0.55 }, { x: 1, y: 0 },
|
||||
],
|
||||
R: [
|
||||
{ x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.35, y: 1 },
|
||||
{ x: 0.5, y: 0.6 }, { x: 0.55, y: 0.45 }, { x: 1, y: 0 },
|
||||
],
|
||||
E: [
|
||||
{ x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.4, y: 1 },
|
||||
{ x: 0.45, y: 0.5 }, { x: 0.65, y: 0.5 }, { x: 0.7, y: 0 },
|
||||
{ x: 1, y: 0 },
|
||||
],
|
||||
W: [
|
||||
{ x: 0, y: 0 }, { x: 0.05, y: 1 }, { x: 0.27, y: 0 },
|
||||
{ x: 0.5, y: 0.65 }, { x: 0.73, y: 0 }, { x: 0.95, y: 1 },
|
||||
{ x: 1, y: 0 },
|
||||
],
|
||||
C: [
|
||||
{ x: 0, y: 0 }, { x: 0.08, y: 0.6 }, { x: 0.18, y: 1 },
|
||||
{ x: 0.6, y: 1 }, { x: 0.8, y: 0.5 }, { x: 0.95, y: 0.1 },
|
||||
{ x: 1, y: 0 },
|
||||
],
|
||||
H: [
|
||||
{ x: 0, y: 0 }, { x: 0.1, y: 1 }, { x: 0.18, y: 0.5 },
|
||||
{ x: 0.82, y: 0.5 }, { x: 0.9, y: 1 }, { x: 1, y: 0 },
|
||||
],
|
||||
L: [
|
||||
{ x: 0, y: 0 }, { x: 0.12, y: 1 }, { x: 0.3, y: 1 },
|
||||
{ x: 0.38, y: 0 }, { x: 1, y: 0 },
|
||||
],
|
||||
O: [
|
||||
{ x: 0, y: 0 }, { x: 0.2, y: 0.85 }, { x: 0.35, y: 1 },
|
||||
{ x: 0.65, y: 1 }, { x: 0.8, y: 0.85 }, { x: 1, y: 0 },
|
||||
],
|
||||
};
|
||||
|
||||
function interpolateLetterY(
|
||||
points: { x: number; y: number }[],
|
||||
t: number,
|
||||
): number {
|
||||
if (t <= points[0].x) return points[0].y;
|
||||
if (t >= points[points.length - 1].x) return points[points.length - 1].y;
|
||||
for (let i = 0; i < points.length - 1; i++) {
|
||||
if (t >= points[i].x && t <= points[i + 1].x) {
|
||||
const segT = (t - points[i].x) / (points[i + 1].x - points[i].x);
|
||||
return points[i].y + (points[i + 1].y - points[i].y) * segT;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// ─── Text layout ─────────────────────────────────────────────────────────────
|
||||
|
||||
const TEXT = "ANDREW CHARLWOOD";
|
||||
const LETTER_WIDTH = 72;
|
||||
const LETTER_GAP = 10;
|
||||
const SPACE_WIDTH = 30;
|
||||
const BASE_LEFT_INSET = 9;
|
||||
const BASE_RIGHT_INSET = 0;
|
||||
|
||||
type LetterLayout = {
|
||||
char: string;
|
||||
startX: number;
|
||||
endX: number;
|
||||
startConnector: number;
|
||||
endConnector: number;
|
||||
};
|
||||
|
||||
type ConnectorProfile = { leftInset: number; rightInset: number };
|
||||
|
||||
const CONNECTOR_PROFILES: Record<string, ConnectorProfile> = {
|
||||
C: { leftInset: 20, rightInset: 8 },
|
||||
O: { leftInset: 17, rightInset: 7 },
|
||||
D: { leftInset: 0, rightInset: 13 },
|
||||
L: { leftInset: 5, rightInset: 0 },
|
||||
E: { leftInset: 5, rightInset: 0 },
|
||||
};
|
||||
|
||||
const DEFAULT_PROFILE: ConnectorProfile = { leftInset: 0, rightInset: 0 };
|
||||
|
||||
function layoutText(offsetX: number): LetterLayout[] {
|
||||
const layout: LetterLayout[] = [];
|
||||
let cursor = offsetX;
|
||||
|
||||
for (const char of TEXT) {
|
||||
if (char === " ") {
|
||||
cursor += SPACE_WIDTH;
|
||||
continue;
|
||||
}
|
||||
const profile = CONNECTOR_PROFILES[char] ?? DEFAULT_PROFILE;
|
||||
const startX = cursor;
|
||||
const endX = cursor + LETTER_WIDTH;
|
||||
layout.push({
|
||||
char,
|
||||
startX,
|
||||
endX,
|
||||
startConnector: startX + BASE_LEFT_INSET + profile.leftInset,
|
||||
endConnector: endX - BASE_RIGHT_INSET - profile.rightInset,
|
||||
});
|
||||
cursor += LETTER_WIDTH + LETTER_GAP;
|
||||
}
|
||||
|
||||
return layout;
|
||||
}
|
||||
|
||||
function getTextTotalWidth(): number {
|
||||
return (
|
||||
TEXT.replace(/ /g, "").length * (LETTER_WIDTH + LETTER_GAP) -
|
||||
LETTER_GAP +
|
||||
(TEXT.split(" ").length - 1) * SPACE_WIDTH
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Timing constants ────────────────────────────────────────────────────────
|
||||
|
||||
const TRACE_SPEED = 350;
|
||||
const HEAD_SCREEN_RATIO = 1;
|
||||
const FLAT_GAP_SECONDS = 0.5;
|
||||
const HOLD_SECONDS = 1.25;
|
||||
const COMP_FPS = 60;
|
||||
|
||||
// How long the dot/line takes to exit the right side after text finishes
|
||||
const EXIT_SECONDS = 1.5;
|
||||
|
||||
// Pre-compute duration for export
|
||||
const _beats = buildBeats(COMP_FPS);
|
||||
const _lastBeat = _beats[_beats.length - 1];
|
||||
const _lastBeatEndWX = (_lastBeat.startFrame / COMP_FPS) * TRACE_SPEED + _lastBeat.widthPx;
|
||||
const _textStartWX = _lastBeatEndWX + FLAT_GAP_SECONDS * TRACE_SPEED;
|
||||
const _totalTextW = getTextTotalWidth();
|
||||
const _textEndWX = _textStartWX + _totalTextW;
|
||||
const _textEndFrame = Math.round((_textEndWX / TRACE_SPEED) * COMP_FPS);
|
||||
|
||||
export const ECGCOMBINED_DURATION = _textEndFrame + Math.round(HOLD_SECONDS * COMP_FPS) + Math.round(EXIT_SECONDS * COMP_FPS);
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
export const ECGCombined = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps, width, height } = useVideoConfig();
|
||||
|
||||
const baselineY = height * 0.5;
|
||||
const lineColor = "#00ff41";
|
||||
const ecgMaxDeflection = height * 0.28;
|
||||
const textMaxDeflection = height * 0.09;
|
||||
const beats = buildBeats(fps);
|
||||
|
||||
// ── World-space text position ──
|
||||
const lastBeat = beats[beats.length - 1];
|
||||
const lastBeatEndWorldX = (lastBeat.startFrame / fps) * TRACE_SPEED + lastBeat.widthPx;
|
||||
const textStartWorldX = lastBeatEndWorldX + FLAT_GAP_SECONDS * TRACE_SPEED;
|
||||
const totalTextWidth = getTextTotalWidth();
|
||||
const textEndWorldX = textStartWorldX + totalTextWidth;
|
||||
const textLayout = layoutText(textStartWorldX); // world-space positions
|
||||
|
||||
// ── Final screen position: text centered when done ──
|
||||
const desiredTextStartScreen = (width - totalTextWidth) / 2;
|
||||
const finalHeadScreenX = desiredTextStartScreen + totalTextWidth;
|
||||
const headScreenDuringEcg = HEAD_SCREEN_RATIO * width;
|
||||
|
||||
// ── Head position (world space, keeps moving past text) ──
|
||||
const currentTime = frame / fps;
|
||||
const headX = currentTime * TRACE_SPEED;
|
||||
const textEndFrame = Math.round((textEndWorldX / TRACE_SPEED) * fps);
|
||||
const isTextPhase = headX > textStartWorldX;
|
||||
const isTextDone = frame >= textEndFrame - 3;
|
||||
|
||||
// ── Viewport: keeps scrolling, head drifts from 75% → right edge ──
|
||||
let headScreenX: number;
|
||||
let viewOffset: number;
|
||||
|
||||
if (headX <= textStartWorldX) {
|
||||
viewOffset = Math.max(0, headX - headScreenDuringEcg);
|
||||
headScreenX = headX - viewOffset;
|
||||
} else if (headX >= textEndWorldX) {
|
||||
// Lock viewport so text stays centered; dot keeps moving right
|
||||
viewOffset = textEndWorldX - finalHeadScreenX;
|
||||
headScreenX = headX - viewOffset;
|
||||
} else {
|
||||
const p = (headX - textStartWorldX) / (textEndWorldX - textStartWorldX);
|
||||
headScreenX = headScreenDuringEcg + p * (finalHeadScreenX - headScreenDuringEcg);
|
||||
viewOffset = headX - headScreenX;
|
||||
}
|
||||
|
||||
// ── Y function (world space) ──
|
||||
function getYAtX(worldX: number): number {
|
||||
for (const beat of beats) {
|
||||
const beatStartX = (beat.startFrame / fps) * TRACE_SPEED;
|
||||
const beatEndX = beatStartX + beat.widthPx;
|
||||
if (worldX >= beatStartX && worldX <= beatEndX) {
|
||||
const progress = (worldX - beatStartX) / beat.widthPx;
|
||||
const beatPoints = generateHeartbeatPoints(beat.amplitude);
|
||||
const idx = Math.min(
|
||||
Math.floor(progress * (beatPoints.length - 1)),
|
||||
beatPoints.length - 1,
|
||||
);
|
||||
return baselineY - beatPoints[idx].y * ecgMaxDeflection;
|
||||
}
|
||||
}
|
||||
for (const item of textLayout) {
|
||||
if (worldX >= item.startX && worldX <= item.endX) {
|
||||
const t = (worldX - item.startX) / (item.endX - item.startX);
|
||||
const letterDef = LETTERS[item.char];
|
||||
if (letterDef) {
|
||||
return baselineY - interpolateLetterY(letterDef, t) * textMaxDeflection;
|
||||
}
|
||||
}
|
||||
}
|
||||
return baselineY;
|
||||
}
|
||||
|
||||
// ── ECG trace path (up to text start) ──
|
||||
const firstBeatWorldX = (beats[0].startFrame / fps) * TRACE_SPEED;
|
||||
const traceStartWX = Math.max(Math.floor(firstBeatWorldX), Math.floor(viewOffset));
|
||||
const ecgTraceEndWX = Math.min(
|
||||
Math.ceil(headX),
|
||||
Math.ceil(textStartWorldX),
|
||||
Math.ceil(viewOffset + width),
|
||||
);
|
||||
|
||||
const traceSegments: string[] = [];
|
||||
if (ecgTraceEndWX >= traceStartWX) {
|
||||
for (let wx = traceStartWX; wx <= ecgTraceEndWX; wx++) {
|
||||
const sx = wx - viewOffset;
|
||||
const y = getYAtX(wx);
|
||||
traceSegments.push(wx === traceStartWX ? `M ${sx} ${y}` : `L ${sx} ${y}`);
|
||||
}
|
||||
}
|
||||
const tracePathD = traceSegments.join(" ");
|
||||
|
||||
// ── Flat exit line after text finishes ──
|
||||
let exitPathD = "";
|
||||
if (isTextDone && headX > textEndWorldX) {
|
||||
const exitStartSX = textEndWorldX - viewOffset - 32;
|
||||
const exitEndSX = headX - viewOffset;
|
||||
exitPathD = `M ${exitStartSX} ${baselineY} L ${exitEndSX} ${baselineY}`;
|
||||
}
|
||||
|
||||
// ── Neon fade ──
|
||||
const neonLengthPx = 200;
|
||||
const neonFadeScreenEnd = headScreenX;
|
||||
const neonFadeScreenStart = neonFadeScreenEnd - neonLengthPx;
|
||||
|
||||
// ── Text mask ──
|
||||
const maskBrushSize = 1;
|
||||
const clipLeadPx = 20;
|
||||
const blockUnmaskDelay = 15;
|
||||
const blockFeatherPx = 10;
|
||||
|
||||
const textMaskEndSX = isTextPhase
|
||||
? (isTextDone ? width : Math.max(0, Math.min(Math.ceil(headScreenX), width)))
|
||||
: 0;
|
||||
|
||||
const textMaskSegments: string[] = [];
|
||||
if (isTextPhase && textMaskEndSX > 0 && !isTextDone) {
|
||||
for (let sx = 0; sx <= textMaskEndSX; sx++) {
|
||||
const y = getYAtX(viewOffset + sx);
|
||||
textMaskSegments.push(sx === 0 ? `M ${sx} ${y}` : `L ${sx} ${y}`);
|
||||
}
|
||||
}
|
||||
const textMaskPathD = textMaskSegments.join(" ");
|
||||
const blockUnmaskX = isTextDone ? width : Math.max(0, textMaskEndSX - blockUnmaskDelay);
|
||||
|
||||
// ── Connectors (screen space) ──
|
||||
const connectorSegments: string[] = [];
|
||||
for (let i = 0; i < textLayout.length - 1; i++) {
|
||||
const curr = textLayout[i];
|
||||
const next = textLayout[i + 1];
|
||||
connectorSegments.push(
|
||||
`M ${curr.endConnector - viewOffset - 18} ${baselineY} L ${next.startConnector - viewOffset} ${baselineY}`,
|
||||
);
|
||||
}
|
||||
const connectorPathD = connectorSegments.join(" ");
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ backgroundColor: "#000000", overflow: "hidden" }}>
|
||||
<svg width={width} height={height} style={{ position: "absolute", top: 0, left: 0 }}>
|
||||
<defs>
|
||||
<filter id="neon" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur1" />
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur2" />
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="14" result="blur3" />
|
||||
<feMerge>
|
||||
<feMergeNode in="blur3" />
|
||||
<feMergeNode in="blur2" />
|
||||
<feMergeNode in="blur1" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="neonText" x="-30%" y="-30%" width="160%" height="160%">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="tblur1" />
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="tblur2" />
|
||||
<feMerge>
|
||||
<feMergeNode in="tblur2" />
|
||||
<feMergeNode in="tblur1" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="neonMaskGrad"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1={neonFadeScreenStart} y1={0}
|
||||
x2={neonFadeScreenEnd} y2={0}
|
||||
>
|
||||
<stop offset="0%" stopColor="black" />
|
||||
<stop offset="100%" stopColor="white" />
|
||||
</linearGradient>
|
||||
<mask id="neonMask">
|
||||
<rect x={0} y={0} width={width} height={height} fill="url(#neonMaskGrad)" />
|
||||
</mask>
|
||||
<clipPath id="textReveal">
|
||||
<rect
|
||||
x={0} y={0}
|
||||
width={isTextDone ? width : Math.max(0, headScreenX + clipLeadPx)}
|
||||
height={height}
|
||||
/>
|
||||
</clipPath>
|
||||
<linearGradient
|
||||
id="blockUnmaskGrad"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1={blockUnmaskX - blockFeatherPx} y1={0}
|
||||
x2={blockUnmaskX} y2={0}
|
||||
>
|
||||
<stop offset="0%" stopColor="white" />
|
||||
<stop offset="100%" stopColor="black" />
|
||||
</linearGradient>
|
||||
<mask id="textWipeMask">
|
||||
<rect x={0} y={0} width={width} height={height} fill={isTextDone ? "white" : "black"} />
|
||||
{!isTextDone && blockUnmaskX > 0 && (
|
||||
<rect x={0} y={0} width={blockUnmaskX} height={height} fill="url(#blockUnmaskGrad)" />
|
||||
)}
|
||||
{!isTextDone && textMaskPathD && (
|
||||
<path
|
||||
d={textMaskPathD}
|
||||
fill="none"
|
||||
stroke="white"
|
||||
strokeWidth={15 * maskBrushSize}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
filter="url(#neonText)"
|
||||
/>
|
||||
)}
|
||||
</mask>
|
||||
<radialGradient id="headGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stopColor="#ffffff" stopOpacity={0.8} />
|
||||
<stop offset="30%" stopColor={lineColor} stopOpacity={0.6} />
|
||||
<stop offset="100%" stopColor={lineColor} stopOpacity={0} />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
|
||||
{/* ECG trace */}
|
||||
{tracePathD && (
|
||||
<g>
|
||||
<path d={tracePathD} fill="none" stroke={lineColor} strokeWidth={2}
|
||||
strokeLinejoin="round" strokeLinecap="round" />
|
||||
<path d={tracePathD} fill="none" stroke={lineColor} strokeWidth={2.5}
|
||||
strokeLinejoin="round" strokeLinecap="round"
|
||||
filter="url(#neon)" mask="url(#neonMask)" />
|
||||
</g>
|
||||
)}
|
||||
|
||||
{/* Text + connectors */}
|
||||
{isTextPhase && (
|
||||
<g clipPath="url(#textReveal)">
|
||||
<g mask="url(#textWipeMask)">
|
||||
{textLayout.map((item, i) => (
|
||||
<text
|
||||
key={i}
|
||||
x={(item.startX + item.endX) / 2 - viewOffset}
|
||||
y={baselineY}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="alphabetic"
|
||||
fontSize={Math.round(textMaxDeflection / 0.715)}
|
||||
fontFamily="Arial, Helvetica, sans-serif"
|
||||
fontWeight="bold"
|
||||
fill="none"
|
||||
stroke={lineColor}
|
||||
strokeWidth={1.5}
|
||||
filter="url(#neonText)"
|
||||
>
|
||||
{item.char}
|
||||
</text>
|
||||
))}
|
||||
{connectorPathD && (
|
||||
<path d={connectorPathD} fill="none" stroke={lineColor}
|
||||
strokeWidth={1.5} strokeLinecap="round" />
|
||||
)}
|
||||
</g>
|
||||
</g>
|
||||
)}
|
||||
|
||||
{/* Flat exit line after text */}
|
||||
{exitPathD && (
|
||||
<g>
|
||||
<path d={exitPathD} fill="none" stroke={lineColor} strokeWidth={2}
|
||||
strokeLinejoin="round" strokeLinecap="round" />
|
||||
<path d={exitPathD} fill="none" stroke={lineColor} strokeWidth={2.5}
|
||||
strokeLinejoin="round" strokeLinecap="round"
|
||||
filter="url(#neon)" />
|
||||
</g>
|
||||
)}
|
||||
|
||||
{/* Head dot */}
|
||||
{headScreenX >= 0 && headScreenX <= width && (
|
||||
<>
|
||||
<circle cx={headScreenX} cy={getYAtX(headX)} r={20} fill="url(#headGlow)" />
|
||||
<circle cx={headScreenX} cy={getYAtX(headX)} r={3} fill={lineColor} />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
|
||||
{/* Scanlines */}
|
||||
<div style={{
|
||||
position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
|
||||
background: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px)",
|
||||
pointerEvents: "none",
|
||||
}} />
|
||||
|
||||
{/* Vignette */}
|
||||
<div style={{
|
||||
position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
|
||||
background: "radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%)",
|
||||
pointerEvents: "none",
|
||||
}} />
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user