Build notes / 07

Inside
TIDELINE.

A coastal intelligence concept built around the rhythm of water. The signature technique is animated canvas gradient surface.

01

Paint a moving atmosphere

Four large radial gradients drift on a Canvas 2D surface. Their centers follow low-frequency sine and cosine functions. Transparent edges blend into a pale aquatic base. The canvas renders at CSS-pixel resolution to bound its fill cost.

02

Protect the information

The model panel uses a nearly opaque white-green background, a subtle border, and backdrop blur. Legibility does not depend on the gradient’s current position. The map is CSS contour geometry, explicitly labeled as abstract.

03

Make the model work

A native range input sets hour 0–24. Water level is 1.4 + 0.65 × sin((hour − 6) / 12.42 × 2π). This is a demonstration, not a real forecast, and the page says so beside the control.

04

Handle motion and narrow screens

Reduced motion paints one still gradient composition. On mobile the two-column panel becomes a vertical map and reading. Every primary piece of text remains outside the canvas.

Reproduce the site

  1. Download the complete source below and keep its name index.html.
  2. Open it through a static server. From its directory, run python3 -m http.server 8000, then visit http://localhost:8000. There is no install or build step.
  3. The stylesheet lives in the head. The rendering and interaction code lives in the final script. Adjust one parameter at a time and compare the result at desktop and 375 px widths.
  4. Google Fonts requires a network connection. All visible artwork is computed locally. Native system fallbacks preserve readable text if fonts fail.
  5. Enable your operating system’s reduced-motion setting and repeat the interaction. Use browser developer tools to check errors, overflow, and frame timing before publishing.
Download complete HTML ↓
The complete rendering and interaction code
const c=document.querySelector('#mesh'),ctx=c.getContext('2d'),rm=matchMedia('(prefers-reduced-motion: reduce)');let w,h;function resize(){const r=c.getBoundingClientRect();w=r.width;h=r.height;c.width=w;c.height=h}resize();function draw(t=0){ctx.fillStyle='#e8f7f5';ctx.fillRect(0,0,w,h);for(let i=0;i<4;i++){const x=w*(.2+i*.23)+Math.sin(t*.00013+i)*w*.15,y=h*.7+Math.cos(t*.00017+i*2)*h*.14;const g=ctx.createRadialGradient(x,y,0,x,y,w*.5);g.addColorStop(0,['#79c9c777','#5aafc377','#a1d6b477','#4ea6a955'][i]);g.addColorStop(1,'#e8f7f500');ctx.fillStyle=g;ctx.fillRect(0,0,w,h)}if(!rm.matches)requestAnimationFrame(draw)}draw();addEventListener('resize',()=>{resize();if(rm.matches)draw()});rm.addEventListener('change',()=>draw());document.querySelector('#hour').oninput=e=>{const h=+e.target.value,level=1.4+.65*Math.sin((h-6)/12.42*Math.PI*2);document.querySelector('#level').innerHTML=level.toFixed(1)+' <span>m</span>';document.querySelector('#hour-label').textContent=String(h).padStart(2,'0')+':00'}
The complete visual system
:root{--body:'Manrope',sans-serif}body{font-family:var(--body);color:#093d43;background:#e8f7f5}header{display:flex;justify-content:space-between;align-items:center;max-width:1300px;margin:auto;padding:30px 4vw;position:relative;z-index:2}header b{font-size:26px;letter-spacing:-.06em}header a{font-size:14px}.hero{position:relative;min-height:850px;padding:65px 4vw 70px;overflow:hidden}#mesh{position:absolute;inset:0;width:100%;height:100%;z-index:0}.intro{position:relative;text-align:center;margin:auto;max-width:750px}.pill{display:inline-block;border:1px solid #44777d;border-radius:30px;padding:8px 15px;font-size:12px;background:#f6fffcbb}.intro h1{font-size:clamp(46px,6vw,85px);line-height:1.05;letter-spacing:-.065em;font-weight:500;margin:25px 0}.intro p{font-size:17px;max-width:49ch;margin:0 auto}.glass{position:relative;background:#f6fff9dc;backdrop-filter:blur(25px);border:1px solid #fff;border-radius:20px;box-shadow:0 30px 80px #084d6325;padding:30px;max-width:1040px;margin:60px auto 0;display:grid;grid-template-columns:1.2fr 1fr;gap:40px}.map{position:relative;min-height:220px;border-radius:12px;background:repeating-radial-gradient(ellipse at 80% 110%,transparent 0 20px,#5a9d962b 21px 22px,transparent 23px 40px),#cde9df;overflow:hidden}.map:before{content:'';position:absolute;width:120%;height:60%;top:-40%;left:-20%;border-radius:50%;background:#78b4a0}.pin{position:absolute;left:55%;top:40%;width:14px;height:14px;border-radius:50%;background:#09575d;box-shadow:0 0 0 15px #09575d18,0 0 0 30px #09575d10}.map-label{position:absolute;bottom:18px;left:18px;font-size:12px;background:#ffffffd9;padding:8px}.readings{display:flex;flex-direction:column;justify-content:space-between}.readings small{font-size:12px;letter-spacing:.09em}.reading{font-size:58px;letter-spacing:-.08em;margin:8px 0}.reading span{font-size:18px;letter-spacing:0}.range{width:100%;accent-color:#09575d}.readings label{font-size:13px}.note{font-size:12px;margin-top:15px}.story{padding:80px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:60px}.story h2{font-size:40px;letter-spacing:-.05em;line-height:1.15;margin:0}.story p{margin:0;max-width:43ch}.colophon{border-top:1px solid #09575d44}@media(max-width:650px){.hero{padding-top:35px}.intro h1{font-size:49px}.glass{grid-template-columns:1fr;padding:20px;gap:25px;margin-top:35px}.map{min-height:200px}.story{grid-template-columns:1fr;gap:25px;padding:55px 6vw}.reading{font-size:48px}}

Original fictional design study. No stock photography, model files, image textures, or sample audio.