✨

The Craft

A meta-memo on micro-delight. How to add craft to any UX codebase. The map that teaches mapmaking.

01Every pixel matters
02Motion conveys meaning
03Discovery rewards exploration
04Layers hide depth
05Mathematics underlies aesthetics
EXPLORE THE CRAFT
01 — THE PYRAMID

Three Layers of Craft

Every artifact rises through these levels. Essential is required. Elevated is expected. Transcendent is the goal.

✨ TRANSCENDENT — window.鏡, philosophy, self-reference
🎯 ELEVATED — data-attrs, keyboard triggers, hidden SVGs
🔨 ESSENTIAL — cursor, particles, breathing, shimmer, hover, scroll
02 — ESSENTIAL

The Foundation

Every artifact MUST have these. No exceptions. Copy this code. Make it yours.

🎯
Custom Cursor

Replace the system cursor with a glowing orb and trailing ring. Responds to hover states. Hidden on mobile.

✨
Floating Particles

30+ particles drifting upward. Random colors from colony palette. Creates atmosphere without distraction.

💨
Breathing Background

Three-layer radial gradients with offset animations. The page feels alive. Never flat. Never static.

💎
Shimmer Text

Gradient that moves across titles. Catches the eye. Creates premium feel. Apply to heroes and headers.

🖱️
Card Transforms

3D perspective on hover. Radial glow follows cursor. Top border animates in. Lift and shadow.

📜
Scroll Reveal

Elements fade up as they enter viewport. Intersection Observer. Staggered delays for groups.

essential-craft.css 
/* ═══ CUSTOM CURSOR ═══ */
.cursor {
    position: fixed;
    width: 12px; height: 12px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    mix-blend-mode: screen;
    box-shadow: 0 0 25px var(--accent);
}

/* ═══ BREATHING BACKGROUND ═══ */
.breath-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(
        ellipse 80% 60% at 50% 50%,
        rgba(var(--accent-rgb), 0.03) 0%,
        transparent 70%
    );
    animation: breathe 8s ease-in-out infinite;
}

/* ═══ SHIMMER TEXT ═══ */
.shimmer {
    background: linear-gradient(135deg,
        var(--text) 0%, var(--accent) 25%,
        var(--text) 50%, var(--accent) 75%,
        var(--text) 100%
    );
    background-size: 400% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 6s ease infinite;
}
03 — MOTION

Catastrophe Timing

Easings named for mathematical catastrophes. Each has a personality. Choose deliberately.

Live Easing Comparison
Fold (A₂)
Cusp (A₃)
Swallowtail (A₄)
Butterfly (A₅)
catastrophe-easings.css 
/* Easings named for Thom's catastrophe types */

/* A₂ — Fold: Sudden emergence */
--ease-fold: cubic-bezier(0.7, 0, 0.3, 1);

/* A₃ — Cusp: Decisive transition */
--ease-cusp: cubic-bezier(0.4, 0, 0.2, 1);

/* A₄ — Swallowtail: Recovery arc with overshoot */
--ease-swallowtail: cubic-bezier(0.34, 1.2, 0.64, 1);

/* A₅ — Butterfly: Complex oscillation */
--ease-butterfly: cubic-bezier(0.68, -0.2, 0.32, 1.2);

/* Fibonacci durations (89, 144, 233, 377, 610) */
--dur-fast: 144ms;
--dur-normal: 233ms;
--dur-slow: 377ms;
--dur-dramatic: 610ms;
04 — COMPOSITION

The Fano Plane

Seven colonies. Seven craft roles. Click to explore how they compose.

🔥 ⚒️ 🌊 🔗 🗼 🌿 💎
Click a colony
to see its craft role
05 — VERIFICATION

The Craft Checklist

Before shipping any artifact, verify. Click to check off. Watch your score.

🔨 ESSENTIAL (Required)
Custom cursor with glow ring
Floating particles or atmosphere
Breathing background (3 layers)
Shimmer/gradient text on titles
Card hover with 3D transform
Scroll reveal animations
Console easter egg
🎯 ELEVATED (Strive For)
Hidden data-attributes on elements
Keyboard triggers (typed sequences)
Click sequences unlock secrets
SVG path animations
Ripple effects on interaction
✨ TRANSCENDENT (The Goal)
window.鏡 or equivalent hidden object
Philosophy in HTML comments
Mathematical structure embedded
Multiple discovery layers
0
CRAFT SCORE