The craft — full builds

Proof of craft,
running live.

Seven builds, end-to-end in-house. Six of them are executing in your browser right now — not mockups, not videos of demos — written from scratch with zero libraries. The seventh is labelled a concept, because it is one. Poke them.

01Ink Type 02Signal Bloom 03Poster Engine 04Depth Field 05Command Deck 06Craft, Embedded 07Jam Ops 08Scroll Story
JR-CRAFT / 01

Ink Type

Interactive typographyCanvas 2DPhysics

Type a word. ~3,000 particles of ink find their letterforms — then your cursor tears them apart and they pour right back.

Live — executing now Drag through the letters
— particles

The brief

Type-first brands need type that behaves like a material, not a bitmap. The self-imposed brief: make letterforms feel like wet ink — something you can push, splash, and watch heal — without shipping a single animation library.

The build

The word is rasterized on a hidden canvas in Syne 800, then the bitmap is walked on a fixed grid — every opaque cell becomes a particle target. Each particle runs a spring-mass simulation: stiffness pulls it home, drag bleeds velocity so the settle reads as pooling ink instead of rubber-band wobble. The cursor is a radial repulsor; particle size swells with speed so disturbed ink reads as splatter.

The fine print

Swapping words morphs the existing particles to new targets instead of restarting — that's why "HONEY" flows out of "LOUD". The grid step auto-scales with canvas area to hold the particle budget steady, the backing store is deliberately capped at 1.5× DPR because that — not the physics — is the frame budget, glyph sampling waits for the webfont so metrics never come from a fallback face, and the loop fully suspends when the section scrolls off screen.

Why it matters for you

This is the difference between a headline people read and one they remember — motion your brand owns outright, not a template effect a hundred other sites are running.

Particles ~3,000Target 60 fpsDependencies 0Physics spring-mass
JR-CRAFT / 02

Signal Bloom

Sound + motionWebAudioFFT visual

A playable synthesizer with its own light show. Five chord pads, a real signal chain, and a visualizer drawn from the actual audio spectrum — not a fake loop.

Live — sound on Keys 1 – 5 work too
WebAudio isn't available in this browser.
silent · tap a pad

The brief

Motion graphics that react to sound usually fake it — a looping video with an equalizer texture. The brief here: build the real thing. An instrument anyone can play, where every pixel of the visual is computed from the live audio signal.

The build

Each pad fires a four-note chord; every note is a three-oscillator voice — two detuned saws plus a sine an octave up — pushed through a lowpass filter whose cutoff sweeps open on attack and closes on release. The whole mix feeds a 320 ms feedback delay for space, then an AnalyserNode running a 1024-point FFT. The visualizer bends 96 frequency bars into a radial bloom and traces the raw waveform as the inner ring.

The fine print

All five pads are voiced diatonic to D minor, so mashing every key at once still resolves musically — a design decision, not luck. Frequency bars are sampled on a power curve because linear FFT bins waste half the ring on bass. Audio only initializes on your first tap (autoplay policy), and until then the ring idles in a slow breathing loop.

Why it matters for you

Launch pages, installations, and campaign sites that respond to your audience instead of playing at them — interaction people talk about after they close the tab.

Voices 12 osc / chordFFT 1024-ptDelay 320 msDependencies 0
JR-CRAFT / 03

Poster Engine

Generative designSeeded systemPrint chrome

A design system that designs. One number — the seed — deterministically decides palette, composition, type treatment and ornament. Same seed, same poster, every time.

Live — generated here ClickTap the poster to reroll
seed — · —

The brief

Every studio claims a "design system." The brief: prove ours can run without hands on it — encode the taste (Swiss grid, brand palette, huge display type, print-shop chrome) into rules tight enough that a random number can art-direct within them and never ship an ugly sheet.

The build

A 32-bit seed feeds a mulberry32 PRNG, and every creative decision draws from that single stream: one of six brand palettes, one of four ornament archetypes — arc stacks, halftone grids, bar fields, orbit maps — the display word, its scale, whether it runs horizontal or rotates up the margin. The fixed layer is the craft: registration marks, a modular margin, a generated barcode, and the seed printed on the sheet like an edition number.

The fine print

Determinism is the feature. Because the PRNG is seeded, every poster is reproducible — the number on the sheet can regenerate it pixel-for-pixel, which is how a generative identity stays a system instead of a slot machine. Rendering happens at a fixed 900×1200 so the Save button exports print-crisp PNGs regardless of your screen. The halftone grid's dot radii follow a diagonal sine ramp; the type gets an offset accent echo for a misregistered-print look.

Why it matters for you

A brand system this disciplined can generate endless on-brand assets — social, print, packaging — without a designer hand-touching every single one. Consistency at volume.

Archetypes 4Palettes 6Canvas 900×1200Reproducible 100%
JR-CRAFT / 04

Depth Field

WebGL shaderGPURaw GLSL

A living surface computed on your GPU — domain-warped noise folded through itself twice, shaded in brand color. Your cursor bends the field; pressing sends a shockwave.

Live — on your GPU Move, then press
WebGL isn't available in this browser — this one needs a GPU.
— fps

The brief

Hero backgrounds are where most sites reach for a stock video or a 500 KB library. The brief: an infinite, never-repeating atmosphere in one shader — no three.js, no textures, no assets to load at all.

The build

The entire scene is one fragment program on a single fullscreen triangle. Five octaves of value noise stack into fractal brownian motion, then the domain gets warped through itself twice — fbm(p + 4·fbm(p + 4·fbm(p))) — which is what turns flat noise into folded, smoke-like structure. The result indexes a five-stop color ramp from void black through cobalt and violet to cyan ice.

The fine print

The cursor isn't a decal drawn on top — it's a uniform inside the math, bending coordinate space toward itself so the smoke leans in as you pass. A press injects a decaying pulse that shoves the field outward and rings a violet shockwave. It renders at 70% resolution because 15 noise evaluations per pixel is the real budget — on this palette the upscale is invisible, and the frame-rate readout below is measuring it honestly.

Why it matters for you

Cinematic atmosphere with zero load-time cost — a site that feels expensive without the multi-megabyte video background that makes visitors wait.

Noise 5-octave fbm ×3Geometry 1 triangleAssets loaded 0Dependencies 0
JR-CRAFT / 05

Command Deck

Site navigationKeyboard-firstVanilla JS

Every page, every service, every build on this site — reachable without touching the mouse. Press ⌘K (or Ctrl+K) right now. Go on.

Live — it's the real one ⌘K or Ctrl+K, anywhere on the site
⌘+K

This isn't a recreation for the page — it's the same overlay that's been sitting on every route since you loaded the nav. Try it from here, or jump back to Services and try it from there.

21 destinations indexed

The brief

Five services, four other craft pieces, a lab, a process — the site already has more worth reaching than a five-item nav bar can hold. The brief: let anyone type to any of it, the way you'd expect from a real product, not a marketing site.

The build

One JS file, injected into the DOM once per page load — the whole overlay is built at runtime, so there's no duplicated modal markup sitting in nine different HTML files. A static array of destinations backs a simple substring filter across label, hint, and group. Arrow keys move a selection index; Enter navigates; Escape or a click on the veil closes it. Global keydown listens for ⌘/Ctrl+K the same way base.js already listens for Escape on the mobile menu.

The fine print

The trigger button lives outside the collapsing nav-links group specifically so it's never buried behind the mobile burger — the fast path stays fast on every screen size. Opening the deck locks body scroll and restores focus to whatever you had focused when you close it, so keyboard users never lose their place. No fetch, no JSON, no build step — the destination list is one array, hand-written, versioned with the rest of the site.

Why it matters for you

The same pattern that makes Linear and Raycast feel fast — because it is fast, for visitors who'd rather type than hunt through a menu. And it's proof this studio ships the internal tooling most agencies only pitch.

Destinations 21Network requests 0Dependencies 0Pages wired 11 / 11
JR-CRAFT / 06

Craft, Embedded

One-line embedRuns off-siteVanilla JS

The other five builds only run here. This one runs anywhere — one script tag, on anyone's site, with our name in the corner.

Live — same file we hand out Watermark is a real link
<script src="https://jamresources.com/embed.js" data-jam="heat"></script> 3 palettes · 0 dependencies

The brief

Proof of craft only sells if someone sees it, and everything above requires a visit to this site. The brief: take one of these builds and make it portable — good enough that another studio, a client, or a friend's side project wants it on their page, and honest enough that it says where it came from.

The build

A single file with no init call. The script reads document.currentScript to find itself in the host's DOM and mounts the canvas exactly where the tag was written, so it drops into the middle of an article without a container div. Drifting metaballs are composited with lighter for the same atmosphere as Depth Field, but on Canvas 2D rather than WebGL — because a host page may not grant us a GPU context, and a widget that sometimes renders nothing is worse than one that always renders something.

The fine print

This is the only file here running on pages we don't control, so it is written defensively: no globals, no network calls, no stylesheet — every style is set inline on our own nodes, so a host's CSS can't bleed in and ours can't bleed out. The loop halts entirely when the canvas scrolls off screen or the tab hides; a widget that drains a stranger's battery gets deleted, and deleted widgets sell nothing. Device pixel ratio is capped at 2 because that frame budget isn't ours to spend. It ships with a one-hour cache, not the site's usual week — a bad version has to be able to age out of pages we can't ask anyone to refresh.

Why it matters for you

Every site that embeds this is a page doing our marketing for free — and the same technique packages your product as something partners can drop into their own pages in one line.

Payload 1 fileGlobals leaked 0Network calls 0Dependencies 0
JR-CRAFT / 07

Jam Ops

Client portalLive presenceInterface concept

Where a project actually lives while we build it: status you can watch move, and everyone's cursor on the same board. This one is the interface, not the product — and we say so.

Simulated — no server behind this Seeded, so it plays the same every visit
ProjectStageProgress
—

The brief

"Where are we at?" is the question that eats agency time, and the usual answer is a status email nobody trusts. The brief: a board a client can open at 11pm and see the truth on — the same four stages promised on the Process section, but moving.

The build

Progress bars are width transitions rather than repaints, so the movement is compositor work and the rows never rebuild — rebuilding on each tick would blow away the very transition that makes a bar read as motion instead of teleporting. Presence cursors ease toward a retargeted point rather than tracking every frame, which is what makes them read as people rather than jitter. Positions are held as fractions and resolved in cqw/cqh against the board itself, so the layout is correct at any width without a resize listener.

The fine print

This one is a concept, and that's the honest label. There is no server, no auth, no database — the activity comes from the same seeded mulberry32 generator the Poster Engine uses, which is why it plays out identically on every visit and can be walked through in a call without wandering off script. The file is written for the swap that would make it real: render() only ever paints state it is given, and tick() is the single function that invents any of it. Replacing tick() with a socket is the migration.

Why it matters for you

Fewer status meetings, and a client who can see the work moving. This is the internal tooling most studios only describe in a pitch deck — here is ours, on the table, with its limits written on it.

Rows 4 livePresence 2 cursorsBackend none yetDependencies 0
JR-CRAFT / 08

Scroll Story

ScrollytellingSticky + observerProgressive enhancement

A pinned page builds itself in five acts as you scroll — the same order every real project here goes through. Scroll down; the story keeps pace with you, and scrubs backwards too.

Live — driven by your scroll Scroll through the steps; the page on the left keeps up

01Structure

Boxes before beauty. The page starts as wireframe — nav, hero, cards, one call to action — so the argument is right before anything is pretty.

02Type

The headline lands first because it does the most work. Display type at full volume, body copy behind it — hierarchy you can squint at.

03Colour

Colour arrives as a system, not a mood: brand gradient on the word that matters, one accent per card, everything else stays quiet.

04Motion

Last-mile choreography — cards stagger up, the CTA breathes. Motion that explains order, and switches itself off for anyone who asked it to.

05Ship

Live badge on. Every step above happened to this very panel while you scrolled — that's the whole technique, shown with itself.

state 5 / 5

The brief

Scrollytelling is everywhere in product marketing and almost always shipped as a 200kB animation library. The brief: the full pattern — pinned visual, discrete states, scrub-in-reverse — with the same zero-dependency discipline as everything else on this page.

The build

The pinned panel is one CSS rule — position: sticky — and the story is one IntersectionObserver watching the step blocks through a band across the middle of the viewport. The step you're reading sets a state class on the panel; every visual change is a CSS transition keyed off those classes. Scroll up and the classes come off in reverse — the scrub costs nothing extra.

The fine print

The markup ships finished: all five state classes are present in the HTML, and the script's first act is to take them away and make you earn them back by scrolling. So with JavaScript off you get the completed page and five readable steps; with reduced motion (or the footer toggle) the observer never starts and the sequence reads as a static, labelled walkthrough. The enhancement ladder runs downhill to plain content, never to a blank panel.

Why it matters for you

Product pages, annual reports, launch stories — this is the format that makes people read the whole thing. Built this way it weighs nothing, works everywhere, and never holds your content hostage to a script tag.

States 5Observers 1Scrubs backwards YesWorks without JS Yes

Imagine this energy
on your brand.

Everything on this page was written from scratch, in-house, with zero dependencies. That level of craft is the standard your project gets too.

Start a project jake@jakemcanelly.com