类型： · 收录：2026-11-05 01:13:02 · 源码：会员可见
# Sun Timeline — Life of the Sun Scrub Hero (exact recreation prompt)
Build a single-file, full-viewport interactive page called **The Life of the Sun**. It is extremely minimal: a pure black page, one glowing ball in the upper-middle, a soft pool of light under it, a two-line caption, and a thin timeline of fine ticks. Scrubbing moves through ten stages of the Sun's life, from solar nebula to white dwarf. Each scrub physically throws the ball: it whips round, its surface smears into horizontal bands, and the new surface lands within about a quarter of a second while the caption blurs across.
Everything is drawn live in a raw WebGL fragment shader. There are no images, no video, and no libraries. Plain HTML, CSS and vanilla JS in one file; the only external resource is the font. Reproduce every value, string and timing below exactly.
Three rules define the look:
1. The ball **never changes size**. All ten stages are surfaces on the same ball.
2. The page stays **pure black**. The halo must reach exactly zero a short way off the ball; no wide glows or background gradients anywhere.
3. It must be **instantly responsive**. Every wheel tick, drag pixel or hover move changes state on that frame.
---
## 1. Font
`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap` (preconnect to fonts.googleapis.com and fonts.gstatic.com crossorigin).
Title: `The Life of the Sun`. Meta description: `Scroll across ten billion years and watch the Sun be born, swell and fade.`
## 2. CSS (use verbatim)
```css
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:#fff;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.ui{position:fixed;left:0;right:0;top:63.2%;display:grid;justify-items:center;padding:0 20px;pointer-events:none}
.cap{position:relative;width:100%;height:54px}
.line{position:absolute;inset:0;text-align:center;transition:opacity .2s linear,filter .2s linear}
.line.off{opacity:0;filter:blur(5px)}
.line h1{font-weight:600;font-size:clamp(16px,2.05vh,21px);letter-spacing:-.012em;line-height:1.25}
.line p{margin-top:6px;font-size:clamp(12.5px,1.55vh,15px);line-height:1.3;color:rgba(255,255,255,.5)}
.line p b{font-weight:500;color:#fff;margin-right:7px}
#track{position:relative;width:min(47vh,84vw);height:64px;margin-top:clamp(14px,3.2vh,30px);pointer-events:auto;cursor:pointer;outline:none}
#track::before{content:"";position:absolute;inset:-8px -30px}
#ticks{position:absolute;left:0;right:0;top:0;height:44px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
#ticks i{display:block;width:1.5px;height:44px;background:#fff;transform-origin:50% 100%;will-change:transform}
.ends{position:absolute;left:0;right:0;top:54px;display:flex;justify-content:space-between;font-size:12.5px;color:rgba(255,255,255,.42);pointer-events:none}
.ends span.on{color:#fff;font-weight:500}
```
## 3. Markup
```html
<canvas id="gl"></canvas>
<div class="ui">
<div class="cap" id="cap"></div>
<div id="track" role="slider" tabindex="0" aria-label="Time" aria-valuemin="0" aria-valuemax="9">
<div id="ticks"></div>
<div class="ends"><span id="e0">Nebula</span><span id="e1">White dwarf</span></div>
</div>
</div>
```
`#ticks` is filled with 37 empty `<i>` elements.
## 4. Stages and looks (use verbatim)
```js
const STAGES = [
{t: '4.6 billion years ago', b: 'Solar nebula', c: 'A cold cloud falls inward'},
{t: '4.57 billion years ago', b: 'Protostar', c: 'Gravity heats a young core'},
{t: '4.5 billion years ago', b: 'Ignition', c: 'Hydrogen begins to burn'},
{t: 'Today', b: 'The Sun', c: 'Halfway through its life'},
{t: '1 billion years from now', b: 'Brighter Sun', c: 'The oceans boil away'},
{t: '5 billion years from now', b: 'Subgiant', c: 'The core runs out of fuel'},
{t: '7.6 billion years from now', b: 'Red giant', c: 'The Sun swallows Mercury'},
{t: '7.7 billion years from now', b: 'Helium flash', c: 'The core reignites'},
{t: '7.8 billion years from now', b: 'Planetary nebula', c: 'The outer layers drift away'},
{t: '8 billion years from now', b: 'White dwarf', c: 'An ember the size of Earth'}
];
// one look per stage; every stage is the same ball. colours are linear and tone-mapped in the shader
const LOOK = [
{c0: [.05,.01,.1], c1: [.62,.12,.42], c2: [1.9,.85,.5], glow: [.8,.25,.6], gI: .22, freq: 2.6, warp: 1.9, cells: 0, gas: 1, shell: 0, boil: 1},
{c0: [.015,.004,0], c1: [.62,.05,.01], c2: [3,1.1,.15], glow: [1.3,.2,.04], gI: .28, freq: 3.1, warp: 1.2, cells: 1, gas: 0, shell: 0, boil: .7},
{c0: [.5,.05,0], c1: [1.7,.48,.03], c2: [3.2,2,.55], glow: [1.6,.5,.06], gI: .85, freq: 4.6, warp: 1.6, cells: .3, gas: 0, shell: 0, boil: 1.5},
{c0: [1,.26,.01], c1: [2.3,1,.12], c2: [3.6,2.9,1.3], glow: [1.8,.68,.1], gI: 1, freq: 3.4, warp: 1.1, cells: 0, gas: 0, shell: 0, boil: 1.1},
{c0: [1.5,.72,.2], c1: [3,2.1,.8], c2: [4.6,4.3,3.4], glow: [1.9,1.2,.5], gI: 1.2, freq: 3.8, warp: 1.1, cells: 0, gas: 0, shell: 0, boil: 1.3},
{c0: [.6,.1,.005], c1: [1.8,.5,.03], c2: [3,1.5,.25], glow: [1.7,.42,.05],gI: .9, freq: 3, warp: 1.6, cells: .15,gas: 0, shell: 0, boil: 1.2},
{c0: [.22,.008,.003],c1: [1.25,.1,.015],c2: [3,.95,.1], glow: [1.8,.16,.03],gI: .85, freq: 2, warp: 2.1, cells: .35,gas: 0, shell: 0, boil: 1.4},
{c0: [1.6,.8,.3], c1: [4,3,1.4], c2: [8,7,5.5], glow: [2.4,1.6,.8], gI: 1.7, freq: 3.2, warp: 2, cells: 0, gas: 0, shell: 0, boil: 3},
{c0: [.02,.09,.12], c1: [.1,.7,.72], c2: [1.8,.42,.16], glow: [.3,.7,.8], gI: .3, freq: 3.4, warp: 1.5, cells: 0, gas: .75,shell: 1, boil: .9},
{c0: [.8,1,1.5], c1: [1.7,2.1,3], c2: [3.6,4.2,5.4], glow: [.8,1.2,2.1], gI: .9, freq: 2.6, warp: .8, cells: 0, gas: 0, shell: 0, boil: .5}
];
const LAST = STAGES.length - 1, PER = 4, N = LAST * PER + 1, START = 3; // 37 ticks, a stage on every 4th
```
## 5. WebGL
Get a `webgl` context with `{antialias:false, alpha:false}`. Draw one full-screen triangle (`[-1,-1, 3,-1, -1,3]`). Canvas backing size is `innerWidth/innerHeight × min(dpr,1.5)`.
Fixed uniforms: `rad = .17`, `cy = .13`, `sc = min(1, innerWidth/innerHeight*1.5)` (shrinks the ball on portrait screens; update on resize).
Vertex shader: `attribute vec2 a;void main(){gl_Position=vec4(a,0.,1.);}`
Fragment shader (use verbatim):
```glsl
precision highp float;
uniform vec2 res;
uniform float sc, rad, cy, fade, t, evo, rot, blur, starX, freq, warp, cells, gas, shell, gI, flick;
uniform vec3 c0, c1, c2, glow;
float h(vec3 p){ p = fract(p*.3183099 + .1); p *= 17.; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); }
float n3(vec3 x){ vec3 i = floor(x), f = fract(x); f = f*f*(3.-2.*f);
return mix(mix(mix(h(i),h(i+vec3(1,0,0)),f.x), mix(h(i+vec3(0,1,0)),h(i+vec3(1,1,0)),f.x), f.y),
mix(mix(h(i+vec3(0,0,1)),h(i+vec3(1,0,1)),f.x), mix(h(i+vec3(0,1,1)),h(i+vec3(1,1,1)),f.x), f.y), f.z); }
float fbm(vec3 p){ float a=.5, s=0.; for(int i=0;i<5;i++){ s+=a*n3(p); p=p*2.03+vec3(1.7,9.2,3.1); a*=.5; } return s; }
vec3 stars(vec2 uv){
vec2 q = (uv + vec2(starX, 0.))*34., id = floor(q), f = fract(q)-.5;
float r = fract(sin(dot(id,vec2(127.1,311.7)))*43758.5453);
vec2 o = vec2(fract(r*17.3),fract(r*91.7))-.5;
float tw = .55+.45*sin(t*(.7+r*1.8)+r*40.);
vec2 g = f-o*.7; g.x *= 1./(1.+blur*7.);
return vec3(smoothstep(.975,1.,r)*smoothstep(.06,.0,length(g))*tw*.55);
}
void main(){
vec2 uv = (gl_FragCoord.xy - .5*res)/res.y, p = (uv - vec2(0., cy))/sc;
float d = length(p), e = max(d-rad, 0.);
vec3 col = stars(uv);
// tight halo that ends completely a short way off the ball, the page stays pure black
vec2 dir = p/max(d,1e-4);
float rays = .72 + .56*fbm(vec3(dir*2.4, evo*.5));
float hal = exp(-e/(rad*.11))*smoothstep(rad*.6, rad*.12, e);
col += glow*gI*.7*hal*rays*flick;
// soft pool of light under the ball, standing in for the reference's contact shadow
float py = (p.y + rad + .065)/.0135, px = p.x/(rad*1.02);
float pool = max(0., 1.-px*px) * exp(-py*py);
col += glow*min(gI,1.)*.1*pool*pool;
if(d < rad + .02){
float k = min(d/rad, 1.);
vec3 nrm = vec3(p/rad, sqrt(max(1.-k*k, 0.)));
float cr = cos(rot), sr = sin(rot);
vec3 n = vec3(nrm.x*cr + nrm.z*sr, nrm.y, -nrm.x*sr + nrm.z*cr);
// spinning fast smears the surface along its axis of rotation
float sq = 1./(1.+blur*3.2);
vec3 q = vec3(n.x*sq, n.y, n.z*sq);
float w1 = fbm(q*freq + vec3(0.,0.,evo*.28)), w2 = fbm(q*freq*.9 + 7. - vec3(evo*.22,0.,0.));
float v = fbm(q*freq*1.7 + warp*2.2*vec3(w1, w2, w1-w2));
float vein = 1.-abs(2.*fbm(q*freq*1.5 + warp*1.3*vec3(w2, w1, 0.))-1.);
vein = pow(vein, 9.);
float s = smoothstep(.24,.76,v);
s = mix(s, clamp(vein*1.25 + s*.14,0.,1.), cells);
vec3 c = mix(c0, c1, smoothstep(.0,.55,s));
c = mix(c, c2, smoothstep(.5,1.,s));
float mu = nrm.z;
if(shell > .001){
// planetary nebula: a hot point, a teal cavity and a filament shell seen through the ball
vec3 sh = c0 + c1*smoothstep(.95,.3,k)*(.25+v*1.2);
float fil = smoothstep(.5,.82,k)*smoothstep(1.,.8,k)*pow(v+.32,3.)*3.2;
sh += c2*fil + vec3(3.5,4.,5.)*exp(-k*k/.012);
c = mix(c, sh, shell);
} else {
c *= mix(mix(.34, .8, gas), 1., pow(mu,.5));
}
c += glow*pow(1.-mu,2.6)*.42*min(gI,1.)*(1.-gas);
float edge = smoothstep(1., .985, k);
float soft = smoothstep(1., .58, k + (fbm(q*3.4 + evo*.1)-.5)*.62) * smoothstep(1., .9, k);
float a = mix(edge, soft, gas);
col = mix(col, c, a);
}
col = 1. - exp(-col*1.15);
gl_FragColor = vec4(pow(col, vec3(.4545))*fade, 1.);
}
```
## 6. State
```js
let x = START/LAST; // timeline position 0..1
let stage = START, omega = 14; // spin speed in rad/s, the page opens on a whip
let rot = 0, evo = 0, starX = 0, lastInput = -1e9, hover = -1, dragX = null;
const cur = deep copy of LOOK[START]; // the live, eased look
```
**Input** all funnels through:
```js
function moveTo(nx, now) {
nx = clamp(nx, 0, 1);
omega += (nx - x) * 150; // every bit of input throws the ball
x = nx; lastInput = now;
}
```
- `wheel` on window, non-passive, `preventDefault`. Use the larger of deltaX/deltaY: `moveTo(x + d*(deltaMode===1 ? .012 : .00075), now)`.
- `#track` `pointermove`: `hover = clamp(px(e))` where `px(e) = (clientX-rect.left)/rect.width`. For mouse when not dragging, `moveTo(hover)`. `pointerleave` sets `hover=-1`.
- Window `pointerdown`: `dragX=clientX`; on the track also `moveTo(px(e))`.
- Window `pointermove` while dragging: on the track `moveTo(px(e))`, elsewhere `moveTo(x + dx/min(innerWidth,900))`.
- `pointerup`/`pointercancel`: `dragX=null`.
- Arrow keys step one stage: Right/Down forward, Left/Up back.
**Each frame** (`dt` capped at .05, `f(r)=1-exp(-dt*r)`, `time=(now-t0)/1000`):
1. Idle autoplay: if not reduced motion, `now-lastInput>5000` and `now>nextAuto` (initially `t0+5000`): `x=((i+1)%(LAST+1))/LAST` where `i=round(x*LAST)`, `omega+=9`, `nextAuto=now+2600`.
2. `i=round(x*LAST)`. If `i!==stage`: `omega += omega>=0?7:-7; stage=i; setCaption(i)`.
3. Ease every numeric and colour field of `cur` toward `LOOK[stage]` by `f(13)` (`f(60)` when reduced motion).
4. `omega *= exp(-dt*3.6)`.
5. `spin = reduced ? 0 : .22 + omega`; `blur = min(1.4, |omega|*.1)`.
6. `rot += spin*dt`; `evo += dt*cur.boil*(1+|omega|*.1)`; `starX += omega*dt*.012`.
7. Set uniforms: `freq warp cells gas shell gI c0 c1 c2 glow t evo rot blur starX`, plus `flick = 1 + .1 sin(time*2.1) + .06 sin(time*5.3)` and `fade = min(1,(now-t0)/500)`.
8. Draw.
9. Update ticks (section 8).
## 7. Caption
`setCaption(i)` appends a new `.line.off` with `<h1>{t}</h1><p><b>{b}</b>{c}</p>`, forces layout, removes `.off`. The previous line gets `.off` and is removed after 240ms. So the old line blurs out while the new one blurs in. Also update `aria-valuenow` and `aria-valuetext`, and toggle `.on` on `#e0` (stage 0) and `#e1` (last stage).
## 8. Ticks
37 ticks (`LAST*PER+1`, `PER=4`), so a stage sits on every 4th tick. Each frame, for tick `j`:
```js
active = x*(N-1); bellAt = (hover>=0 ? hover : x)*(N-1);
q = j-bellAt; bell = exp(-q*q/5.5); on = exp(-(j-active)²/.22);
goal = max((j%PER ? .17 : .28) + bell*.55, on);
tickH[j] += (goal-tickH[j])*f(22);
transform = scaleY(tickH[j]); opacity = .3 + bell*.35 + on*.6;
```
A narrow bell follows the pointer, and the active tick stands tallest and brightest.
## 9. Feel
Quiet and precise, then physical the moment you touch it. Nothing on the page moves without reason, but the ball feels heavy and alive: boiling at rest, thrown hard by the slightest scroll, landing crisply on the next chapter of the Sun's life.