This site uses cookies

Some keep the store working, like sign-in. Meta's pixel helps us measure our ads, and it stays off unless you accept. Cookie policy

Launch price: Lifetime is $229 for every kit and every block until Sun, Nov 15, 11:59 PM PT. Then it's $249.Get Lifetime

LM-53Agencies & studios

Slick

A web design studio site where the cursor paints the page and a glass mouse travels the whole scroll, live in 3D.

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 site for SLICK, an invented web design and development studio, drawn in one WebGL canvas so the cursor paints the page. Wherever the pointer goes it lays down wet paint, black on the red sections and red on the cream and black ones; a GPU fluid simulation swirls each stroke, type inside the paint flips to a cut-out negative, and the paint pulls back, thin tails first, until the page is exact again. A clear glass mouse full of parts (a circuit board, a red-hub wheel, a battery cell with a chrome cap) lies across the giant wordmark in the hero, refracting the type and the paint behind it, then leaves and travels the whole page with the scroll: sixteen stops, whole-turn spins, flips and barrel rolls, clicking what it points at. Every section is a set piece: a studio statement set as a live design file with other people's cursors in it, services where a browser window, a keycap, a phone, a rocket and a chrome pointing hand each take the stage, work as six case files whose covers play each project's signature moment, the process as an edit timeline the mouse rides along the playhead, plans as tickets that show what you get, questions, and a contact form that sends nothing until you point one setting at your own service. All six objects are built in code with no model files. Phones get their own poses and a lighter tier, reduced motion shows every final state, and browsers without WebGL 2 get the same page in CSS with line drawings of the objects. For agencies, studios, freelancers and anyone selling craft.

How it's made

  1. A page drawn in WebGL

    One canvas sits under the DOM with a camera that maps one world unit to one CSS pixel. Section colours, the dot grid, display type and the work covers are flat quads placed from the DOM's own boxes, so the cursor can paint over all of it while copy, buttons and forms stay real HTML on top.

  2. A cursor that paints

    A stable fluids simulation runs under the pointer and carries a separate paint field. Strokes are flat topped and deposited with max, never a sum, so joints never bead; the flow swirls them a little and they pull back thin tails first. A B-spline lookup and a one-pixel edge keep the contours round and crisp, and type inside the paint takes the section's colour, cut out of the paint.

  3. Six objects in code

    A glass mouse, a browser window, a keycap, a phone, a rocket and a pointing hand are written as signed distance functions and meshed in a web worker, with filleted walls on every cut so each edge draws one clean highlight. Clear glass and a fine transmission target keep the parts inside the mouse sharp.

  4. A mouse that travels the page

    Sixteen stops, one per section, each a pose solved from where the nose and the top should point on screen. Between stops the mouse flies on the house curve with whole-turn spins and flips, scrubbed by the scroll, and a keep-in-view rule stops it leaving the screen when a stop's box scrolls away.

  5. Sections that are set pieces

    The studio statement is a live design file with cursors and an inspector that rolls every value; the work is six case files whose covers play each project's moment; the process is an edit timeline with a monitor and a playhead the mouse rides; the plans are tickets with a live strip each.

  6. Phones, speed and fallbacks

    The page starts on a low tier and a governor steps up when frames keep up. Phones get their own poses and lighter objects. Without WebGL 2 the same layout runs in CSS with line drawings of the objects, and reduced motion shows every final state with no paint and no flights.

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/

  • 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.

See a real zip, opened

Specs

Stack
Vite 8.3 · React 18.3 · TypeScript 5.9 · three.js 0.186 · Lenis 1.3 smooth scroll · GLSL shaders · Stable fluids paint cursor · Procedural geometry: signed distance functions meshed in a web worker · Transmission glass with HDR bloom · Archivo · Archivo Black · Instrument Serif and JetBrains Mono (self-hosted)
File size
0.7 MB
Triangles
432,701
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 lighter objects and their own poses. Without WebGL 2 it switches to the same layout in CSS with line drawings of the objects. Reduced motion turns off the paint 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

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. 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.

  3. 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 dev

  4. Make 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, objects and code by Designed by Parallel, LLC, built for this kit. SLICK is an invented studio and every project shown is fictional concept work. The hero layout follows a comp the studio drew for this kit; the comp itself is not included. The paint cursor follows Jos Stam's Stable Fluids method, written from scratch. All six objects are original designs built in code with no model files; none is traced from a real product or brand. The four fonts are self-hosted under the SIL Open Font License. Written with an AI coding assistant (Claude Code) under Parallel's direction. No real people, photos, video or AI-generated media.

Buy LM-53 Slick

Single kit

Price: $49once

By buying you agree to the Terms and License.

Included with Annual and Lifetime.

Or every kit for life, $229.

Launch price until Sun, Nov 15. Then $249.