A technical showcase, not a portfolio page

Four motion/UI libraries, wired up as vanilla CDN modules or isolated React islands, styled entirely from this site's own design tokens. Not linked from the main nav; reachable by direct URL only. Everything here respects prefers-reduced-motion.

Motion (motiondivision)

Spring-driven vanilla interactions

Loaded via a pinned jsdelivr +esm build. Motion's vanilla bundle has no layoutId or drag helper (those are React-only). The shared-layout expand and the drag-reorder below are hand-built FLIP and pointer-event implementations that hand off to Motion's animate() for the spring settle.

Spring tilt

Move the cursor over the card. Spring back on leave (stiffness 300, damping 20).

tilt me

Shared-layout expand

Click a still from Art. The same image morphs into a detail panel, no navigation.

Spring drag-reorder

Drag a project chip to a new slot. Release for a spring settle.

Workspace Template

Skill Repo 1.0

Brutal UX

CC CLI

Reduced motion: arrow buttons replace drag.

On classiccottrell.ca: the shared-layout expand is the natural pattern for the Art page's film-still grid: tap a still in place instead of opening a new route.

anime.js (juliangarnier)

Timeline-driven vanilla choreography

anime.js v4 (a different API surface from v3: named exports, createTimeline, svg.createDrawable), also via a pinned +esm build.

Staggered headline

The homepage headline, split and staggered in.

I design world-class enterprise products that feel effortless to use.

SVG line-draw

Scroll into view or click the monogram to draw it.

Scrubbable timeline

Drag the handle (or click the track) to scrub a 3-state diagram.

Sketch

Build

Ship

On classiccottrell.ca: the scrub timeline is a strong fit for walking a case study's process phases inline, without a slideshow or route change.

bklit-ui (shadcn registry)

React island: token-styled charts

bklit-ui ships as copy-paste registry source, not a published bundle, so there is nothing to import from a CDN. Instead this is React 18 + Recharts (UMD) + Babel standalone, mounted in an isolated #bklit-island div, with every fill/stroke resolved from this page's own CSS variables.

On classiccottrell.ca: the tenure gauge is honest enough to sit directly in the homepage subtext as a small inline stat, no dashboard needed.

kokonutui

React island: interaction mechanics, re-skinned

Not an import: the interaction mechanics (magnetic press, hover-lift glow, marquee reveal) rebuilt from scratch in --brand-primary / --radius-small, no gradient or glass surfaces.

On classiccottrell.ca: the magnetic button is a candidate for the hero's primary CTA once one exists; the marquee suits a footer skills strip.