How to ship acinematic site under a300KB JavaScript budget

Cinematic and fast are not opposites. They become opposites when motion is implemented as layout-thrashing JavaScript, when 3D loads on first paint, and when every section hydrates whether it is on screen or not. The budget we hold is simple: less than 300KB of initial JavaScript, LCP under a second on a mid-range connection, and no layout shift from fonts, images or counters.

What belongs on first paint

The H1, the first answer paragraph, the logo, subsetted display and body fonts, and a poster for any hero media. Counters render their final value in HTML so a crawler and a reader with JavaScript disabled see the same number. Everything else — WebGL, GSAP timelines, video — waits for intent: in-view, hover, or a reduced-motion skip.

Video without wrecking LCP

Portrait clips stay portrait. Landscape clips stay landscape. No letterboxing a 9:16 into a 16:9 stage. Native aspect, rounded corners, lazy mount when the poster enters the viewport, pause when it leaves, and no playback when the user prefers reduced motion. Do not upscale a 480p encode to fill a 4K frame — encode at the displayed size.

Motion that does not move the document

• Transforms and opacity only. No animating top, height or margin.
• CSS reveal as the no-JS fallback; JavaScript adds the hidden state.
• Scroll-driven typewriter uses word tokens so Arabic and other connected scripts stay joined.
• One cubic-bezier used everywhere so the site feels like one instrument.

The checklist

Juries notice craft. CFOs notice conversion. The 300KB budget is how you keep both in the room. If a proposed library cannot live behind a lazy boundary, it does not ship.

Fonts are the silent LCP killer. Self-host two families, subset to the glyphs you actually use, and never let a type CDN sit on the critical path. Display fonts swap; body fonts optional-size-adjust. If a headline still jumps, the subset is wrong, not the animation.

Hydration policy: the first paint must be a complete sentence. Counters show their final value in HTML. Accordions work as native details where possible. The JavaScript you ship is allowed to ornament, not to reveal the product. That is how a crawler and a human with JS disabled see the same company.

Images: width and height reserved, lazy below the fold, no upscaling. A 256-pixel logomark is not an Open Graph image. A 1200×630 raster exists for a reason. Video posters are real frames, not a blurred first millisecond.

The CI gate is the culture. If a pull request cannot explain which lazy boundary a new library lives behind, it does not merge. Cinematic is a constraint problem. Treat it like one.

We export statically and serve from a CDN because TTFB is part of the cinematic promise. A warm Node server in one region is a different product. Choose the product on purpose.

Operators should also write a one-page source-of-truth for claims: founding year, headcount, markets, flagship services, contact points and any number they are willing to see quoted. Every public page, schema block and off-site profile is then a copy of that page. When the number changes, change it once. Drift is how generative systems lose confidence in you.

Measurement cadences matter because these programmes fail quietly. A monthly prompt panel, a weekly schema validation, a quarterly contradiction audit against LinkedIn and directories — that is enough. Daily dashboards of vanity metrics are how teams convince themselves they are shipping. They are not a substitute for a panel that names who got cited.

Procurement will ask for guarantees. There are none for rankings, snippets or citations, and any partner who offers them is selling theatre. What you can contract is leading work: the fact layer, the panel, the evaluation harness, the hooks-per-week, the JS budget. Buy the work that causes the outcome, not the outcome as a slogan.

If this reads like engineering, that is the point. Marketing that still depends on a human pushing it every Monday is a subscription to exhaustion. The studio that treats GEO, AEO, agents, creative and the website as one operating system will keep the clients who have already noticed that the click is no longer the whole game.

A practical first week looks the same across these programmes. Export the current questions, claims and workflows. Circle the ones you cannot prove. Delete or rewrite them. Then pick one surface to make extractable: a homepage answer, a service FAQ that matches schema, a fact table, a gold set for one agent, or a Monday creative brief. Depth on one surface beats a thin layer on twelve.

Documentation is part of delivery. Clients keep the accounts, the code, the evaluation sets and the prompt panels. Lock-in is not a business model we use. If a system cannot be handed to an in-house team with a runbook, it is not finished, however good the demo looked on a Friday.

We work in English from DHA Phase 1, Lahore, overlapping UK, EU and North American hours, with WhatsApp and email as the two human lines. The diagnosis after a complete brief is written and lands within 48 working hours. That constraint is intentional. If we cannot describe the work in two days, we should not be selling it.

Use the takeaways at the top of this article as a checklist. If you cannot tick them with artefacts — a panel, a schema file, a budget gate, a gold set, a scoreboard — you do not have a programme yet. You have a slide. The rest of this library exists so the slide can be replaced with a system.

Ship the smallest complete version. A panel of thirty prompts is better than a plan for three hundred. A single production agent with a gold set is better than a roadmap of twelve. Six live hooks are better than a manifesto about velocity. A site that answers in the first paragraph and stays under budget is better than a concept film that never loads. Completeness at a small scale is how these systems start compounding. Incompleteness at a large scale is how they become another subscription to exhaustion.