Creative Agency

A one-page marketing site for a studio, agency or consultancy, built around a hero that reads like recorded footage rather than a stock web page. Six post-processing layers sit over a still image or video: a vignette, animated film grain, a slow handheld drift, chromatic aberration at the edges, an optional lens curvature and a colour grade.

No 3D engine, no canvas, no WebGL. The whole effect stack is CSS gradients, one SVG turbulence tile and a compositor transform, which is why it still loads quickly on a mid-range phone. The grain is rasterised once and animated by moving the tile rather than re-running turbulence every frame.

English and Arabic, with real RTL

Both languages ship as separate root layouts, so the Arabic page carries dir="rtl" and lang="ar" on the document element itself rather than on a wrapper div — which is what keeps screen readers and search engines correctly informed. Arabic gets its own font stack, because a Latin display serif has no Arabic coverage and would silently fall back. Layout uses logical properties throughout, so one set of styles serves both directions. Removing a language is deleting one folder.

Every effect on a dial

Effect intensities are not props. They live in a single stylesheet as CSS custom properties — vignette opacity and spread, grain opacity, tile size and blend mode, drift distance and duration, aberration offset, grade contrast and saturation, and the text scrim. Tuning the look never means opening a TypeScript file, so a designer can change it without reading code. Props decide whether a layer exists; the stylesheet decides how strong it is.

Built to behave

Effects are confined to the hero — everything below it is flat and highly readable, because grain behind body copy hurts legibility and costs compositor time on every scroll. A reduced-motion preference stops the drift, the grain reseed and every scroll entrance, and the background video never mounts; the static look survives. On mobile the video is never loaded at all, grain drops and drift is disabled. Hero text sits on a solid scrim rather than on the photograph, so contrast is provable rather than hopeful.

The scroll reveals are progressive enhancement: with JavaScript disabled the full page still renders, rather than a hero above five blank sections. Every placeholder is marked with a TODO comment, and the README covers swapping the hero media, tuning each effect and adding or removing a language.

What you get

The complete Next.js project source — App Router, TypeScript, Tailwind and Framer Motion. It builds to a fully static site with no Node server at runtime, so it deploys to nginx, Netlify, Vercel, S3 or GitHub Pages by uploading a folder. Run npm install and npm run dev to start.