Standalone code lab · the bollocks edition

Typography. Animation. Interaction. Polish. Show-off code.

A kitchen-sink front-end playground — CSS, canvas, WebGL, audio, SVG, 3D, glitch, terminals. No framework. Built to win the room when a client asks “can you make it feel premium?”

Dive in

30+ interactive demos WebGL · Audio · Canvas · PHP · WP · Python Present · Share · 40+ snippets

clamp()@keyframesIntersectionObserver canvas 2dclip-pathbackdrop-filter perspective 3DSVG strokeCSS vars requestAnimationFramePythonPHPWordPress

01 · Typography

Type that earns the scroll

Scale, gradient ink, kinetic scramble, glitch — still readable on a phone.

Display / serif

Quiet luxury, loud code.

Gradient fill

Electric blue → ice cyan

Glitch

SYSTEM ONLINE

Fluid clamp()

Resize the window — this line flexes.

H1Aa

H2Aa

BodyAa

MonoAa

CaptionLabel

Tracking & leading

Tight headlines for impact — short lines, high contrast.

Body copy breathes. Slightly looser leading keeps long paragraphs calm on dark UI.

// variable font vibes

Text scramble

Hover me to decode.

Mask reveal

Words emerge through a moving light mask — pure CSS gradient animation.

02 · Motion

Animation with intent

Micro-moves, springs, loaders, morphs — not carnival noise.

Pulse & glow

Live

Status that feels “on air”.

Staggered bars

Morph blob

border-radius keyframes only.

Counter tick

0ms target

0fps feel

0% human QA

Loaders

Spinner · bounce dots · indeterminate bar.

Progress ring

Flip card

Hover / focus

CSS 3D rotateY

Skeleton shimmer

Loading placeholders before content arrives.

03 · UI craft

Surfaces, glass, magnetic CTAs

Cards that react. Buttons that follow the pointer. Glass that stays legible.

Glass panel

Depth without clutter

Blur, border light, soft shadow.

Get a quote

3D tilt

Pointer parallax

Buttons

Interactive bento

Cursor glow via CSS variables.

01Layout

02Type

03Motion

04A11y

Before

After

Before / after slider — pure HTML range + clip-path.

04 · CSS 3D

Perspective without WebGL

Cubes, carousels, stacked cards — GPU-friendly transforms.

Spinning cube

HTML

CSS

SVG

A11y

Ship

Card stack

Layer 1 — brand

Layer 2 — type

Layer 3 — motion

Layer 4 — ship

Orbit logos

05 · Canvas 2D

Pixels when CSS isn’t enough

Particles, constellation links, matrix rain, freehand trails.

Constellation

Move pointer — nodes attract. Touch: ambient drift.

Matrix rain

Classic glyph rain — pure 2D canvas.

Trail draw

Soft metaballs

Additive blobs that melt together — classic demo-scene energy.

05b · WebGL shaders

GPU colour fields

Fragment shaders on a full-bleed canvas. Drag to warp. Falls back to CSS gradient if WebGL is blocked.

Initialising…

Speed Chaos

Pointer moves the vortex centre. Pure GLSL · no Three.js. Export grabs the live GPU frame.

05c · Sound-reactive

Web Audio API visualiser

Real frequency data — mic or a built-in synth bed. Browsers require a click to start audio.

Gain

Idle — press Start (needs a user gesture).

06 · Scroll

Story as you move

Progress, sticky steps, horizontal strip, parallax.

Full-page scroll progress.

Snap · 01
Discovery

Snap · 02
Wireframes

Snap · 03
Visuals

Snap · 04
Build

Snap · 05
Preview

Snap · 06
Launch

Horizontal scroll-snap strip (swipe / shift+wheel).

Discover

Goals, audience, constraints.

Design

Structure locked before heavy build.

Ship

Private preview, then launch.

07 · Effects

Spotlight, noise, filters, clip-path

Move the cursor. Drag the filter. Morph the shape.

Cursor spotlight

Grid reveal under the pointer.

Film grain

Noise so dark flats don’t look plastic.

SVG path draw

Stroke on enter.

CSS filter lab

Saturate Contrast Hue Blur

clip-path morph

Polygon morphs between blob / diamond / chevron.

08 · Widgets & UI patterns

Terminal, toasts, tabs, accordion

Patterns clients actually touch — with polish.

jamie@hub:~

Tabs

Layout, type, brand — before a single line of production code.

Accordion

What stack is this?

Vanilla HTML, CSS, JS. No React, no build step.

Will it run on Hostinger?

Yes — static assets + PHP if you need it. Same box as the main hub.

Can you add this to my site?

Pick the bits that fit. You don’t need every demo — just the craft.

Toasts

Modal

Command palette

Press Ctrl+K (or ⌘+K)

09 · Python

Python for real web work

Not a toy REPL — production-shaped snippets for APIs, automation, data and backends. Copy the pattern, adapt to your stack.

Python API

Flask JSON endpoint

Minimal API with CORS-friendly JSON — clean for portals and internal tools.

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.get("/api/health")
def health():
    return jsonify(ok=True, service="hub")

@app.post("/api/lead")
def lead():
    data = request.get_json(silent=True) or {}
    email = (data.get("email") or "").strip()
    if "@" not in email:
        return jsonify(error="invalid email"), 400
    # enqueue mail / CRM here
    return jsonify(ok=True), 201

Python FastAPI

FastAPI typed route

Pydantic models, automatic docs, async-ready — great for modern backends.

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, EmailStr

app = FastAPI(title="Jamie Hub API")

class LeadIn(BaseModel):
    name: str
    email: EmailStr
    budget: str | None = None

@app.post("/leads")
async def create_lead(body: LeadIn):
    if not body.name.strip():
        raise HTTPException(400, "name required")
    # await db.insert(body)
    return {"ok": True, "email": body.email}

Python Data

CSV → clean JSON

Client imports, product feeds, report pipelines — stdlib only.

import csv, json
from pathlib import Path

def csv_to_json(src: str, dest: str) -> int:
    rows = []
    with Path(src).open(newline="", encoding="utf-8") as f:
        for row in csv.DictReader(f):
            rows.append({
                k.strip(): (v or "").strip()
                for k, v in row.items()
            })
    Path(dest).write_text(
        json.dumps(rows, indent=2, ensure_ascii=False),
        encoding="utf-8",
    )
    return len(rows)

if __name__ == "__main__":
    n = csv_to_json("products.csv", "products.json")
    print(f"wrote {n} rows")

Python Automation

Polite fetch + parse

Requests + BeautifulSoup pattern for internal tools (respect robots & rate limits).

import time
import requests
from bs4 import BeautifulSoup

SESSION = requests.Session()
SESSION.headers.update({
    "User-Agent": "JamieHubBot/1.0 (+contact)"
})

def fetch_title(url: str) -> str:
    r = SESSION.get(url, timeout=15)
    r.raise_for_status()
    soup = BeautifulSoup(r.text, "html.parser")
    t = soup.find("title")
    return (t.get_text(strip=True) if t else "")

for url in urls:
    print(fetch_title(url))
    time.sleep(1.0)  # be polite

python · lab

Simulated REPL for the lab (browser-side). Real Python runs on your machine or server.

Where Python earns its place

APIs & microservices — Flask / FastAPI next to PHP or static sites
Automation — reports, imports, content pipelines, cron jobs
Data — CSV/JSON transforms, light analytics, migrations
AI glue — orchestration scripts around models and tools
Internal tools — admin CLIs and ops scripts that stay readable

Same standard as the front-end lab: clear code, no ceremony, ships on real hosting.

Talk Python builds

10 · Scroll theatre

One line. Sticky. Cinematic.

A single pinned statement that transforms as you scroll — pure scroll progress math, no library.

Scroll this block

Build it so they feel it before they read it.

0% through the pin

11 · Snippet library · loading…

Copy the bits that matter

PHP, WordPress, Python, CSS, JS, SQL, WebGL and ops — open any card for the full snippet, one click to clipboard. Filter by language below.

11b · Ship-ready patterns

What clients actually need in the repo

Not only shaders — the boring, valuable stuff: CSRF, PDO, WP enqueue, SEO head, security headers.

PHPsecurity

CSRF + safe mail

Session tokens, header-injection guards, contact forms that survive real spam bots.

WordPresstheme

CPT + enqueue + REST

CSS / JSfront-end

Fluid type, glass, reveal

clamp() scales, glass panels, IntersectionObserver reveals, debounce.

Opsship

Headers, HTTPS, deploy

Security headers, .htaccess HTTPS, SCP deploy, SEO head tags.

12 · Mic drop

This isn’t a template.
It’s a standard.

Motion with intent — not decoration for its own sake
GPU when it earns it · CSS when it’s enough
Accessible defaults · reduced-motion respect
Zero framework tax · ships on real hosting

Work with Jamie Back to shaders

Present mode ends here — the last slide in the walkthrough.

13 · Craft notes

Pretty is useless if it breaks

Focus, reduced motion, semantic structure — shippable craft.

const gl = canvas.getContext('webgl');
const ctx = new AudioContext();
navigator.mediaDevices.getUserMedia({ audio: true });

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

This page is the demo.

Custom HTML, CSS and JS — same philosophy as client work: fast, intentional, no bloat.

Start a project Back to jfreemanhub.com

More playgrounds:

CSS navigation menus Demo 1 · Visual CMS Demo 2 · Headless Demo 3 · PHP native

Typography. Animation. Interaction. Polish. Show-off code.

Tracking & leading

// variable font vibes

Text scramble

Mask reveal

Pulse & glow

Staggered bars

Morph blob

Counter tick

Loaders

Progress ring

Flip card

Skeleton shimmer

Depth without clutter

Pointer parallax

Interactive bento

Spinning cube

Card stack

Orbit logos

Constellation

Matrix rain

Trail draw

Soft metaballs

Discover

Design

Ship

Film grain

SVG path draw

CSS filter lab

clip-path morph

Tabs

Accordion

Toasts

Modal

Command palette

Flask JSON endpoint

FastAPI typed route

CSV → clean JSON

Polite fetch + parse

Where Python earns its place

CSRF + safe mail

CPT + enqueue + REST

Fluid type, glass, reveal

Headers, HTTPS, deploy

This isn’t a template. It’s a standard.

Phase 3 stack

This page is the demo.

This isn’t a template.
It’s a standard.