| import React from 'react'; | |
| import { AbsoluteFill } from 'remotion'; | |
| import { C } from '../theme'; | |
| import { rnd } from '../lib/anim'; | |
| type Props = { | |
| f: number; | |
| /** 0..1 overall brightness of the ambient glow. */ | |
| intensity?: number; | |
| accent?: string; | |
| accentY?: number; | |
| }; | |
| /** Deep-space backdrop: gradient, a faint engineering grid, stars and drifting dust. */ | |
| export const Backdrop: React.FC<Props> = ({ f, intensity = 1, accent = C.cyan, accentY = 860 }) => { | |
| const stars = new Array(150).fill(0).map((_, i) => { | |
| const x = rnd(3.1, i) * 1080; | |
| const y = rnd(9.7, i) * 1920; | |
| const r = 0.8 + rnd(5.3, i) * 1.9; | |
| const tw = 0.32 + 0.42 * Math.abs(Math.sin(f * 0.021 + i * 1.7)); | |
| return { x, y, r, o: tw * (0.45 + rnd(7.7, i) * 0.55) }; | |
| }); | |
| const dust = new Array(26).fill(0).map((_, i) => { | |
| const x = rnd(11.3, i) * 1080; | |
| const base = rnd(2.2, i) * 1920; | |
| const y = (base - f * (0.18 + rnd(4.4, i) * 0.35) + 1920) % 1920; | |
| return { x, y, r: 1.2 + rnd(6.6, i) * 2.2, o: 0.08 + rnd(8.8, i) * 0.18 }; | |
| }); | |
| return ( | |
| <AbsoluteFill style={{ backgroundColor: C.bg }}> | |
| <AbsoluteFill style={{ transform: `scale(${1.02 + Math.sin(f * 0.004) * 0.01})` }}> | |
| <svg width={1080} height={1920} viewBox="0 0 1080 1920"> | |
| <defs> | |
| <linearGradient id="bgGrad" x1="0" y1="0" x2="0.35" y2="1"> | |
| <stop offset="0%" stopColor="#090B14" /> | |
| <stop offset="48%" stopColor="#05060C" /> | |
| <stop offset="100%" stopColor="#03040A" /> | |
| </linearGradient> | |
| <radialGradient id="accentGlow"> | |
| <stop offset="0%" stopColor={accent} stopOpacity={0.18 * intensity} /> | |
| <stop offset="45%" stopColor={accent} stopOpacity={0.06 * intensity} /> | |
| <stop offset="100%" stopColor={accent} stopOpacity={0} /> | |
| </radialGradient> | |
| <radialGradient id="goldGlow"> | |
| <stop offset="0%" stopColor={C.gold} stopOpacity={0.1 * intensity} /> | |
| <stop offset="100%" stopColor={C.gold} stopOpacity={0} /> | |
| </radialGradient> | |
| <radialGradient id="vignette"> | |
| <stop offset="55%" stopColor="#000000" stopOpacity={0} /> | |
| <stop offset="100%" stopColor="#000000" stopOpacity={0.72} /> | |
| </radialGradient> | |
| <pattern id="grid" width="72" height="72" patternUnits="userSpaceOnUse"> | |
| <path d="M 72 0 L 0 0 0 72" fill="none" stroke="#8FA6C8" strokeWidth="0.6" strokeOpacity="0.075" /> | |
| </pattern> | |
| </defs> | |
| <rect width={1080} height={1920} fill="url(#bgGrad)" /> | |
| <rect width={1080} height={1920} fill="url(#grid)" opacity={0.55} /> | |
| <ellipse cx={540} cy={accentY} rx={620} ry={700} fill="url(#accentGlow)" /> | |
| <ellipse cx={540} cy={1600} rx={560} ry={420} fill="url(#goldGlow)" /> | |
| {stars.map((s, i) => ( | |
| <circle key={`s${i}`} cx={s.x} cy={s.y} r={s.r} fill="#DCE6FF" opacity={s.o} /> | |
| ))} | |
| {dust.map((d, i) => ( | |
| <circle key={`d${i}`} cx={d.x} cy={d.y} r={d.r} fill={accent} opacity={d.o} /> | |
| ))} | |
| <rect width={1080} height={1920} fill="url(#vignette)" /> | |
| </svg> | |
| </AbsoluteFill> | |
| </AbsoluteFill> | |
| ); | |
| }; | |
Xet Storage Details
- Size:
- 3.29 kB
- Xet hash:
- ccbb8fc221172b04765a1048bebbb7fac39b3fb6ad86414216a04be8b4a8fcb5
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.