Lens flare — Design Atlas

.stage{position:absolute;inset:0;background:linear-gradient(180deg,#0a0a16,#04040a);overflow:hidden} .src{position:absolute;width:9%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,#fff 0,#ffe9b0 40%,transparent 72%); box-shadow:0 0 40px 14px rgba(255,220,150,.55);transform:translate(-50%,-50%)} .fl{position:absolute;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen} #f0{width:4%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)} #f1{width:7%;aspect-ratio:1;background:radial-gradient(circle,rgba(140,220,255,.55),transparent 70%)} #f2{width:3%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,140,200,.6),transparent 70%)} #f3{width:10%;aspect-ratio:1;border:1px solid rgba(200,220,255,.35); background:radial-gradient(circle,transparent 55%,rgba(200,220,255,.12) 70%,transparent 85%)} #f4{width:5%;aspect-ratio:1;background:radial-gradient(circle,rgba(255,214,140,.5),transparent 70%)}

const src=document.getElementById('src'); const dots=['f0','f1','f2','f3','f4'].map(id=>document.getElementById(id)); const fracs=[0.35,0.62,1,1.35,1.75]; function frame(t){ const time=t*0.00045; const sx=50+Math.sin(time)*36; const sy=28+Math.sin(time*1.3)*14+8; src.style.left=sx+'%'; src.style.top=sy+'%'; const cx=50, cy=50, dx=cx-sx, dy=cy-sy; dots.forEach((d,i)=>{ const k=fracs[i]; d.style.left=(sx+dx*k)+'%'; d.style.top=(sy+dy*k)+'%'; }); requestAnimationFrame(frame); } requestAnimationFrame(frame);

A camera lens is built from several stacked glass elements. When a strong light source — the sun, a lamp — sits near the frame, some of that light fails to pass straight through the coatings and bounces between the glass surfaces instead. Those bounces trace the aperture's shape into a string of round artifacts, lined up along the straight line connecting the light source to the frame's optical center — that's lens flare.

It started out as a defect lens designers tried to engineer away with coatings, but from the 1970s on, cinematographers began embracing it deliberately — flare signals "shot with a real camera" and lends a scene warmth and realism. Anamorphic lenses' horizontal blue streaks became an iconic look for science fiction for exactly this reason.

Building it in CG or on the web: place several round artifacts along the line from the light source through the frame's center, varying their size and color the farther they sit from the source. Move the light source across the frame and those artifacts need to travel along that same line to keep reading as real.

When to use

Use it when the sun edges into frame outdoors, or in CG/motion graphics when you want to borrow the feel of a real lens. Keep it restrained in dialogue-heavy shots so it doesn't fight legibility.