Inkling
A notes app landing page where the cursor is ink and nine glass cards orbit a portrait, then travel the page with the scroll.
The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.
A complete landing page for Inkling, an invented notes app, drawn in one WebGL canvas so the cursor is a pen: it lays wet ink on a paper page that flows and pulls back, and the serif headlines turn into their negative inside it. In the hero a black and white portrait is drawn as a live relief that turns a few degrees toward the pointer with real parallax, and nine frosted glass cards (a voice memo, an idea, a to-do list, a whiteboard photo, a quote, a date, a link, a person, a sketch) orbit the head on a tilted ring, passing in front of the face and behind it. Drag the ring to spin it, hover to bring a card forward, click one to open it and read. Then the cards travel the page together, scrubbed by the scroll: one at a time into a demo dock where each plays its own demo (a waveform heard into a to-do, a typed idea highlighted, a whiteboard read line by line), a swirl round the head and a pour into three trays whose counters tick as cards land, a shelf where a question flies its source cards up beside the typed answer, a moving band above three plans with a monthly and yearly switch, and back into orbit round the head over the sign-up form, which sends nothing until you point one setting at your own service. All the page's copy sits in one blended layer, so every word stays readable on paper, on the dark chapters and inside the ink. Phones get their own orbit and a lighter tier, reduced motion holds every card in place, and browsers without WebGL 2 get the same page in CSS with the portrait and stills of the cards. Ships with the script that turns any cut-out portrait into the relief. For apps, SaaS, AI tools, coaches, writers and any product about ideas.
How it's made
Paper, ink and a pen
The whole page is drawn in one WebGL canvas under the DOM: paper fields with a dot grid, serif headlines in GL, and a stable fluids simulation under the pointer that carries an ink field. The cursor lays down ink that flows and pulls back, and headlines inside it turn into their negative.
One blended layer for every word
All copy, buttons and forms sit in one group blended with difference and drawn in the paper colour, so they read dark on paper, light on the dark chapters and flip inside the ink, with no colour logic per section.
A portrait as a relief
A generated black and white portrait, cut out, with a depth map computed by Depth Anything V2. The engine lifts a 256 by 256 grid by the depth in the vertex shader and turns it as one piece toward the pointer on springs. It sits in the opaque pass, so frosted cards in front of the face show it blurred and cards behind it are hidden.
Nine glass cards, one flock
Each card is a rounded glass plate with its face drawn inside the same shader from a canvas painted in code, plus a soft shadow on the page. On the ring they keep fixed slots, yaw so they never show their back and pass behind the head; drag spins the ring with inertia.
A choreography scrubbed by the scroll
One table of stops: the hero orbit, three demo docks, the trays, the shelf, the band and the finale orbit. Between stops the cards fly staggered on bowed paths, with whole swirls of the ring, and scrolling back plays it backwards. A section docks a card just by placing a box where it should land.
Something to do in every chapter
Three cards play demos when they dock, the trays fan on hover and count as cards land, a real ask bar answers four questions and flies the source cards up, and the plans roll their prices between monthly and yearly.
Phones and fallbacks
Phones get a lighter head, a smaller orbit and their own stop values; a governor steps the quality up when frames keep up. About 15 shader programs for the whole page. Without WebGL 2 the same layout runs in CSS with the portrait and stills of the cards, and reduced motion holds every card in its seat.
In this kit
src/
Full source. The complete site as its own project, ready to run.
public/
Media and assets. The images, clips, textures and icons the page loads.
bench/
scripts/
docs/
Build guide. The full build story, every decision and fix, and the prompts behind it.
index.html
package.json
package-lock.json
vite.config.ts
tsconfig.json
.gitignore
README.md
Start here. What's inside and how to run it.
HOW-IT-WAS-MADE.md
How it was made. The build step by step, and a recipe to make your own.
ADAPT.md
Adaptation prompt. Fits the kit to your client's brand in an AI builder.
RESKIN.md
Re-skin guide. Colors, type, copy and media, changed file by file.
PROVENANCE.md
Provenance. Where every model, texture and image came from.
THIRD_PARTY.md
Open-source credits. Every library and font inside, with its license.
LICENSE.md
Commercial license. Unlimited client projects, one person per license, no resale.
Specs
- Stack
- Vite 8.3 · React 18.3 · TypeScript 5.9 · three.js 0.186 · Lenis 1.3 smooth scroll · GLSL shaders · Stable fluids ink cursor · Depth-mapped portrait relief · Transmission glass cards with canvas-painted faces · Fraunces · Instrument Sans and DM Mono (self-hosted) · Python portrait prep script (Depth Anything V2 Small · ONNX)
- File size
- 5.4 MB
- Triangles
- 527,893
- Browser
- Needs WebGL 2: current Chrome, Edge, Firefox and Safari on desktop and phones. The page starts on a low tier and steps up when the device keeps up; phones get a lighter portrait mesh, a smaller orbit and their own poses. Without WebGL 2 it switches to the same layout in CSS with the portrait as an image and stills of the cards. Reduced motion turns off the ink, the drift and the flights. Tested from a fresh unzip in headless Chromium with software rendering at 1440 x 900 and 390 x 844, in WebGL and fallback: no page errors, npm audit 0. Not yet tested on a real GPU, in Safari or Firefox, or on real phones.
- Released
- Nov 2026
- Version
- 1.0.0
From download to client site
Buy it, or get it with a plan
Buy this kit on its own, or get every kit in the collection with a plan.
Download the zip
It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.
Run it
Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.
npm install && npm run devMake it your client's
Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.
Unlimited client projects, one person per license, no resale. Read the license
Design, copy, motion, card faces and code by Designed by Parallel, LLC, built for this kit. The calm layout took its direction from a reference landing page; nothing from it was traced or copied, and the brand, words, type, portrait, cards and code are new. The portrait was generated for this kit with an AI image model and shows no real person; its depth map was computed with Depth Anything V2 Small (Apache-2.0). Replace the portrait with one you have the rights to before client use (the kit includes the script). Inkling is an invented product and every note and price on the page is illustrative. The three fonts are self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction.
Buy LM-54 Inkling
Single kit
Price: $49once
Included with Annual and Lifetime.
Pay on Stripe. You don't need an account to pay.
Your receipt comes by email, and the kit is saved under the email you paid with.
Download it from your library. New here? Make your account with that same email. Up to 10 downloads of each kit a day; each link works for 10 minutes.
Haven't downloaded anything yet? Email us within 14 days for a full refund.
Launch price until Sun, Nov 15. Then $249.