Cinematic dark landing
Compose a GPU-led hero with a loader ritual, technical HUD and one signature pointer effect.
— transmission 01 / cinematic-dark
COOL/LANDING
An anti-template framework. Pick a Style World, compose mechanics, ship a brand only that brand could own. Switch the world above — every section reshapes itself.
00:00:00
shader compiled
scroll arms the orbit
the sigil is the protagonist
CoolLanding skill / design primitives
The skill turns a brief into a black-stage WebGL system.
Use this world when a launch needs to feel like software, signal and ceremony. The page is built from one anchor object, not a decorative background.
Void · origin · bloom
Black stage, luminous core, GPGPU particles, HDR bloom, chromatic composite, grain.
Renderer channels
Time, pointer, scroll and click must change pixels in a real browser before the world is considered alive.
— chapter 01 / composition
A void with one luminous object.
01
webgl-shader-field
A fragment shader with pointer, scroll, and time uniforms. The brand is the way the field reacts.
// uniforms u_mouse, u_scroll, u_time
02
loader-ritual
A morphing core + count + line. The site opens like a piece of software, not a website.
boot.percent → 100; pulse = 1
03
scramble-text
The wordmark resolves from noise on first paint and on hover. Identity earned, not declared.
resolve('COOL/LANDING')
04
signature: the signal ring
A raymarched chrome sigil with an emissive core — a 3D anchor object no other brand owns.
sdTorus(R*q, vec2(1.0, .135))
— chapter 02 / signature
Scroll arms the orbit.
Scroll is not navigation here — it is throttle. As you descend, the camera dollies into the swarm, the orbit accelerates, and the bloom swells. Click anywhere to fire a shockwave through the field.
0GPU particles
0render passes
0target frame-rate
0style worlds
— chapter 03 / pipeline
Six passes, one frame.
- 01
GPGPU simulation
Curl-noise advects every particle inside a floating-point FBO, ping-ponged each frame.
pos₁ = sim(pos₀, curl, attractor, shock) - 02
HDR points
Positions are drawn as additive points through a real perspective camera into a half-float scene buffer.
blendFunc(ONE, ONE) - 03
Bright-pass
Only highlights above threshold survive into the bloom chain — the rest goes dark.
if (luma < 0.62) discard - 04
Separable blur ×3
A ping-ponged Gaussian with a growing radius builds soft, wide bloom cheaply.
blur(H) → blur(V), r += 1 - 05
Filmic composite
Scene + bloom are tone-mapped, then chromatic aberration shifts the channels.
tonemap(scene + bloom·k) - 06
Grain & vignette
A final film grain and vignette glue the frame together — never a flat gradient.
+ grain(uv, t) · vignette
issue №02
EDITORIAL INTERFERENCE
may. mmxxvi
— world 02 / editorial-interference / type-anchored
White space is the layout.
The wordmark is the building.
The cursor is the lens.
An editorial design language for brands that compete on taste. Heavy type, one hot accent, photographs treated like print. Hover anywhere to reveal the grid.
CoolLanding skill / design primitives
The skill writes the page like an art-directed magazine spread.
Use this world when taste, typography and cultural signal matter more than a feature checklist. The grid is visible, intentional and a little confrontational.
Editorial landing
Transform a brand into a masthead, contents page and proof sheet with a cursor-led reading rhythm.
Wordmark · plate · loupe
Cropped display type, halftone imagery, one hot accent, print captions, table-of-contents rows.
Layout pressure
The headline must crop without breaking; pointer movement should shift the portrait and reveal the lens.
— in this issue / contents
Contents
-
01
00
The cursor is the lens
How a loupe reveals the typographic grid — only when invited.
-
02
00
White space is the layout
Why the editorial world refuses gradients and parallax cliché.
-
03
00
One hot interrupt
A single accent (#ff3c08) carries every italic, mark and edge.
-
04
00
Photographs treated like print
Halftone plates, captions, and the discipline of a grid.
-
05
00
Colophon & credits
Set in serif and mono, printed in paper-ink. Filed under taste.
— feature one
Read the page. Don't decorate it.
The editorial world rejects gradient overlays and parallax cliché. The hierarchy is the design: a portrait, a wordmark, a lede, and one accent. Anything else is interference.
Like a magazine spread, every element earns its position. The cursor reveals the underlying grid — visible only when invited.
Plate 02
If three studios use the same gradient, none of them designed it. The framework demands a Signature Mechanic — one thing only your brand could ship.
— Anti-Template Manifesto, §2
Cropped mega-type
Display type at 30vw, cropped past the edge. Reads as building, not as headline.
Cursor lens
A circle of grain that follows the cursor. Reveals the typographic grid only on hover.
Hot interrupt
One color does the work. #ff3c08 for italics, marks, edges. Nothing else.
— world 03 / ritual-craft / sticker-anchored
A skill packaged like
your favorite sticker pack.
composition
sticker-stack · wobble-on-hover · pinned-horizontal-track · paper-texture-bg · doodle-layer
signature
"A cursor that drops the brand's stickers wherever you click and remembers them on reload."
CoolLanding skill / design primitives
The skill makes a landing page feel handled, stamped and kept.
Use this world for community tools, remote rituals and open-source projects that need warmth and participation before polish.
Ritual craft launch
Package the brand as a tactile operating system with persistence, checklist state and a stampable surface.
Sticker · window · clipboard
Saturated panels, desktop-window metaphors, chunky borders, doodle layers, paper texture.
Interaction memory
Stamps and checklist ticks must stay scoped to this world and survive reloads without leaking elsewhere.
Today's rituals
0/5 donetick anything — your list persists on reload, just like the stamps.
01 / ritual one
Morning kickoff with a saturated tab.
Each panel is one color, one mood, one tool. Pinned horizontal scenes turn vertical scroll into a sticker story.
09:00Standup
10:30Design review
12:00Workshop
15:00Demo call
02 / ritual two
Cards that act like real stickers.
The wobble on hover, the offset shadow, the 3px black border. Tiny choices that read as tactile.
03 / ritual three
Open-source toy operating system.
The skill teaches the agent to build worlds like this — for community products, remote work tools, anything that lives on warmth.
— maison / alcove iv
An atelier for landing pages
that never look templated.
Each brand earns its own alcove — a self-contained room with its own material, its own light, its own quiet score. Scroll between alcoves like rooms in a private museum.
CoolLanding skill / design primitives
The skill turns a premium brief into a sequence of quiet rooms.
Use this world for luxury, heritage or object-led brands where restraint, material and pacing must carry the value.
Luxury alcove journey
Compose one room per promise, each with its own material palette, object and deliberate transition.
Alcove · object · score
Serif cadence, brass rules, cutout product, mirror reflection, restrained Web Audio, slow activation.
Material restraint
Every room needs a distinct material cue; animation should read as breath, not spectacle.
— composition
A room. A material. A score.
The luxury world refuses neon. Each section earns one micro-palette — ivory, oxblood, brass — and one material. Reflection is the only kinetic decoration permitted.
- palette
- ivory · oxblood · brass
- type
- serif italic, large counters
- motion
- 1500–3500ms eased
- audio
- web-audio drone score
- signature
- circle gesture rotates the room
— gallery / three alcoves
Walk the private museum.
I.
— Alcove of Restraint
Ivory. Oxblood. Brass.
The world rejects gradient. Each room earns one micro-palette and one material. Reflection is the only kinetic decoration permitted.
Pl. I
II.
— Alcove of Ceremony
Slow camera. Slow type.
Transitions take 1500–3500ms. Serifs lead. Hidden gestures reward curiosity without gating critical content.
Pl. II
III.
— Alcove of Score
The page hums.
A Web Audio score threads as a narrative layer — never wallpaper. Toggle the dot above the hero to listen (default: muted).
Pl. III
— savoir-faire / the hand
Patience is the material.
- I
Drawn
The composition is sketched in serif and silence before a single pixel is placed.
- II
Set
Type is set with large counters and generous leading. White space does the talking.
- III
Lit
One material, one light. Reflection is the only kinetic decoration permitted.
- IV
Scored
A web-audio drone threads the rooms as a narrative layer — never wallpaper.
0maison, since
0longest transition
0accent per room
— world 05 / spatial-architecture / volume-first
SPACE rendered as VOLUME
A spatial design language for places, property and infrastructure. The hero is a volume, not a headline — the pointer tilts the model, scroll lowers the waterline, and the world reflects itself below the horizon.
CoolLanding skill / design primitives
The skill gives abstract claims a place, datum and horizon.
Use this world for real estate, infrastructure, climate, architecture or any brand that needs to feel measured and inhabitable.
Spatial showcase
Build a volume-first landing page where model, section, index and horizon explain the offer.
Datum · slab · reflection
Survey coordinates, axonometric layers, waterline mirror, proximity index, scroll-fed strata.
Local geometry
Scroll must move the waterline and active strata; pointer must tilt or orbit the spatial object.
— section / strata
Read the building like a section drawing.
Sky deck
Pointer-tilt parallax. The volume leads, the copy follows.
Mass
One luminous object in a calm field. Reflection is the only decoration.
Waterline
Scroll lowers the horizon; everything above mirrors below it.
Datum
A grounded grid, surveyed coordinates, real proximity numbers.
— world 06 / festival-kinetic / max-energy
SPRINT 2026
A high-energy design language for launches, conferences and developer festivals. Saturated, numbered, loud — built to make people feel like something is happening right now.
when26 · 27 jun
whereThe Web ▸ Live
passfree / fork
CoolLanding skill / design primitives
The skill converts a launch into a numbered live event.
Use this world when a product, conference or campaign needs momentum: loud chapters, physical passes and repeated scroll beats.
Festival kinetic launch
Stage a high-energy landing page with a chapter index, anchor ticket and active card lineup.
Pass · index · marquee
Saturated blocks, kinetic type, event metadata, ticker loops, numbered sessions, pointer tilt.
Rhythm density
The page should keep changing as you scroll: active chapter, assembled cards and a live anchor object.
“A launch page should feel like the room changed temperature.”
— CoolLanding field note / 06— line-up / sessions
Twelve hours. One signature each.
Kinetic type
Mega words that snap in on a stagger. Motion is the message.
Numbered index
Everything is catalogued. Chapters, sessions, edges. Confidence reads as order.
Hot marquee
A ticker that never stops. The page has a pulse you can read.
Anchor object
A physical pass tilts with the pointer. The page needs a thing, not a wallpaper.
Scroll reveal
Cards count themselves in. The lineup assembles as you descend.
Signature
Each card owns one accent. No card borrows another's color.
— world 07 / papercraft-tactile / handmade
Made by hand,
folded by code.
A warm, tactile design language built from layered cut-paper, soft shadows and a little character that walks the page as you scroll. Nothing here is flat — every element looks glued down by hand.
CoolLanding skill / design primitives
The skill makes scrollytelling feel cut, folded and walked.
Use this world for portfolios, education, craft products or any brand where a small character can carry the visitor through the story.
Papercraft narrative
Build a character-led scroll path with tactile layers, folded sheets and handcrafted motion.
Paper · path · traveler
Cut-paper hills, SVG path drawing, sticky stage, walking character, fold transforms, torn footer.
Visible sticky path
The traveler must stay pinned in the viewport and visibly walk the path; changed coordinates alone do not count.
field note
ink + paper open source
ink + paper open source
01 · pack
02 · fold
03 · glue
04 · ship
map no. 07 / paper trail
Cut, don't render
Layered shapes with offset shadows read as glued paper, not gradients.
Warm by default
Cream, kraft and ink. One soft pastel does the smiling.
A character walks
The signature: a paper friend that travels a path as you scroll.
— world 08 / generative-system / seed-driven
One seed.
Infinite brand.
A generative design language: the identity is a flow-field grown from a seed. Tune the parameters, shuffle the seed, and the whole field reorganises. The URL carries the seed — share a link, share the exact artwork.
seed
00000000
CoolLanding skill / design primitives
The skill turns identity into a shareable system state.
Use this world when the brand should feel alive, parameterized and reproducible: one seed, many frames, every variation linkable.
Generative identity page
Compose a seeded canvas field with live controls, permalink state and exportable output.
Seed · field · panel
Flow-field particles, deterministic RNG, parameter sliders, pointer vortex, FPS readout, PNG save.
Stateful renderer
Pointer, click and controls must change pixels; URL seed must reproduce and share the same system.
— the system
Designed once. Grown forever.
flow-field
Thousands of agents read a noise field and trace it. The field is the brand.
seeded rng
One integer determines everything. Same seed, same artwork, every time.
url-state
The seed lives in the address bar. The permalink is the asset.
export
Save the current frame to PNG — generative identity, shipped as a file.