Hand-built, no page builder and no libraries: a WebGL hero drawn from the product metaphor, a pinned product tour where the app assembles itself as you scroll, kinetic type, and a waitlist form (the form is a demo; nothing is sent). It is fast on a phone, too.
Open the live page
- WebGL threads hero. Our own small shader, no 3D library (10 KB of script): every run is a thread with a spark on it; tangled on the left, combed into one lit bundle on the right.
- Cursor as a lamp. Threads near the pointer calm down and brighten; a soft glow follows the cursor down the page.
- Kinetic type. Headlines ignite letter by letter; the closing line lights up around the cursor.
- Scroll-driven story. The problem statement lights up word by word as you read it; the product tour is pinned and drawn by the scroll.
- Magnetic buttons, spotlight cards, counters on the sample run, a typed code sample, a looping log wall and marquee that pause off-screen.
- Speed first. WebGL waits until the page has painted and the visitor moves (or the page goes idle), stops off-screen and in hidden tabs; reduced-motion visitors get a still, finished frame.
Lighthouse · phone
- Performance
- 99
- Accessibility
- 100
- Best practices
- 100
Simulated mid-range phone on a slow 4G connection.
Lighthouse · laptop
- Performance
- 100
- Accessibility
- 100
- Best practices
- 100
Measured September 28, 2026 on a local build, two runs, the lower kept. SEO is left out on purpose: the page is marked noindex.
Animated in the browser and rendered frame by frame, so the threads in the video are the same code as the landing page. One story: thousands of steps, one went wrong, Tracewick lights it up, replay the fix, logo.
The mark
One thread with a loop in it (the run that went round in circles), pulled straight and lit at the end. The wordmark is Bricolage Grotesque at 86% width, outlined.
Color
#0B0B0FGround#F3EEE4Text, paper#FF9A3CThe lit step, actions#8C96F0Runs, model calls#FFC98AHighlights#FF5C77The broken step#3DDC97Passed checks#121319Cards, panelsSee every step your agents take.
refunds.create · $1,240.00 · flagged
The closing period is ember: the same dot as the end of the mark.
Thread for runs, ember for what matters, fault for what broke, clear for what passed. Never decoration.
Things light up in order, like a spark along a wick, then settle.
Files: Logo, light (SVG) · Logo, dark (SVG) · Mark (SVG) · App icon (SVG) · Wordmark (SVG)
The invite that goes to the waitlist on launch morning. Written to be read in ten seconds, built to survive email clients.
- Table layout and inline styles, 600 px wide, one media query for phones
- A “bulletproof” button with a VML fallback for Outlook on Windows
- Hidden preheader text for the inbox preview line
- System fonts in the body, so nothing breaks when web fonts are blocked
- Unsubscribe link and address placeholder in the footer
One campaign line, “Find the step that broke,” cut to the sizes a B2B launch actually buys. Each size has its own layout, not a shrunk copy: the story keeps its top and bottom clear of the app's buttons, and the two display units drop the body copy and keep a headline, the lit step and a button. The picture is the product idea: the pin sits exactly where the red run failed.
Copy that ships with it
- Intro text · LinkedIn (under 150 characters, so nothing is cut)
- Your agent said “done.” Step 6 refunded $1,240 with no approval. Tracewick lights up the step that broke a rule.
- Headline
- Find the step that broke. Open beta November 10.
- Button
- Sign up
· matches “Join the waitlist” in the art
Display units, shown at actual size. At this size there is no room for a sentence, so each keeps a headline, the lit step and one button. A 1 px edge stops them melting into a dark page. 20 KB and 18 KB, well under the usual 150 KB limit.
Flat print files for a launch-night booth: a 10 × 8 ft backwall, the name badge and a 33 × 80 in pull-up banner. Set up at physical size, with bleed and a safe area, and with everything that has to be read kept above the table.
How they are set up
- Backwall
- 120 × 96 in trim, 1 in bleed, 3 in safe area. Headline letters about 8 in tall; nothing that must be read in the bottom 36 in. The PDF is 1:1 with type and logo as vectors.
- Pull-up
- 33 × 80 in. The message sits between 5 and 72 in from the top; the bottom goes into the stand.
- Badge
- 4 × 3 in at 300 ppi. First name set at 0.7 in so it reads from a few steps away; the band color marks the badge type.
As a client request, a kit like this is about one month on Design + Build ($6,495): the name, identity and landing page in the first two weeks, then the ads, social, email and print files. The teaser video is motion work, quoted as its own project (from $6,000). Need it sooner? Tell us the date and we quote it as a fixed-price project.
- Name and positioning check. A one-line position, a three-point story, and a search for names already in use, before any design.
- Identity. Logo as SVG, colors with roles, open-license type, and a one-page brand sheet.
- The launch landing page, built and handed over as a working site, checked with Lighthouse on a phone and a laptop.
- A teaser video in 16:9 and 4:5, with poster frames, under 4 MB each.
- Social posts and a link preview for the launch week.
- A Product Hunt gallery, sized for the listing.
- The launch email, as HTML that works in Gmail and Outlook, plus a plain-text version.
- An ad set for paid social and display: one concept in six sizes, each laid out for its size, with the copy for every field.
- Event print files: a booth backwall, name badges and a pull-up banner, set up at physical size with bleed and safe areas.
- Source files for all of it, so your team can make the next post without us.
Launching soon? We'd start with your name and your one line.
Social set
4 posts at 1080 × 1350 · OG image at 1200 × 630
A sequence for the launch week: the announcement, the problem, the replay, and how little setup it takes. Each post carries one idea and the same sample run, so the set reads as a story.
The link preview is designed too: when someone pastes the landing page into Slack, LinkedIn or X, this is what they see.