Quick summary
FORCE takes the thirteen wind forces Francis Beaufort wrote down in 1805 and makes the page itself the instrument. A single value — the wind force under your scroll — drives every decision on screen: the palette, the density and length of the moving air, the tracking of the type, the lean of the numeral, and the shape of the sea along the bottom rail. Daylight turns progressively grimmer to Force 7, then the squall lands and the whole page cuts to storm night.
Who this template is for
A page that performs its subject rather than illustrating it. It is for any story with a scale or a range at its centre.
- Data journalists and editorial teams with a story that lives on a scale rather than in a narrative
- Product teams presenting a pricing ladder, severity index, tier structure or capability range
- Studios needing a reference for a page where a single value drives every visual property
What problem this template solves
Most site templates look fine in a screenshot and fall apart in production — interchangeable sections, stock imagery, and nothing that proves craft.
- Template marketplaces sell the same layouts to thousands of buyers, so nothing ends up feeling owned
- Buyers can usually preview a design but almost never see the exact instructions that produced it
- Teams need reference builds that survive contact with real content rather than lorem-ipsum mock-ups
What you get with this template
You get the thirteen Beaufort wind forces as one continuous instrument, where a single value under your scroll drives every visual decision on screen.
- One value — wind force — driving palette, air density, type tracking, numeral lean and the shape of the sea
- A monumental numeral built from a canvas field of streaming air masked to the shape of a digit
- One file with no images, no libraries and no build step, drawn entirely in canvas and SVG
Page sections overview
| Section | Purpose |
|---|---|
| Single-Variable Art Direction | Derive every visual property from one scroll-eased value |
| Type Made of Moving Air | Build the display numeral from a masked field of streaming particles |
| Progressive Daylight Grade | Darken the world as the scale climbs |
| Canvas Outline Rendering | Render large glyph outlines by dilate-minus-fill to avoid stroke artefacts |
| Sea-State Bottom Rail | Redraw the sea along the base to match the current force |
Design & branding system
The identity is a scientific instrument that turns hostile as you climb it: a palette that greys out with force, and type that leans into the wind.
- A palette that desaturates and darkens progressively with force, so the mood is carried by the data rather than applied to it
- Display numerals that lean and tighten as force rises, with tracking driven by the same value as the weather
- No images and no libraries anywhere — every mark is drawn in canvas or SVG, which keeps the whole page a single file
Mobile & speed optimization
The build is desktop-first where the cinematic moments live, with a deliberate responsive pass so nothing breaks in a pocket.
- Layout reflows to a single column on small screens with type scales tuned by hand rather than left to chance
- Heavy media is deferred or swapped for stills on constrained connections so first paint stays fast
- Hover-dependent interactions carry touch-friendly equivalents, so no content is stranded on mobile
How this template helps you convert
The page earns attention before it asks for anything — the same conversion logic the OGtraplord homepage runs on.
- The strongest visual moment loads first, so a visitor forms a positive impression before reading a word
- Every section answers one question and hands off to the next, keeping scroll momentum toward the call to action
- The ask arrives only after the proof — by the time a visitor reaches it, the work has already made the argument
Other information about this template
A few notes on this build.
- It is one self-contained file with no build step, no dependencies and no media requests
- The scale is data: swapping the thirteen forces for your own steps does not require touching the rendering
- Type is sheared with a CSS transform rather than the canvas matrix, which keeps glyph rasterisation crisp
- It works best on a subject with a genuine ordered range; an unordered category list will not carry it
How it works
Scroll position eases into a single wind-force value, and every visual property reads from it each frame. The monumental numeral is a canvas field of streaming air masked to the shape of a digit, so it is barely there in still air and a torrent at Force 12. No images, no libraries, no build step — one file, drawn entirely in canvas and SVG.
Where it fits
Any subject with a scale or a range — a pricing ladder, a severity index, a product line, a timeline. The scale carries the story, and the page performs it instead of illustrating it.
Screenshots
Captured from the live build, section by section. This is the template as it actually renders, not a mock-up.
