Fidgets

Interactive visual fidgets built with SvelteKit and WebGL, deployed to Cloudflare Workers.

Spacelines

A WebGL particle system with connected lines, gaussian bloom, and an interactive dot grid that responds to mouse and touch input.

• Particles drift with flow-field physics and connect when nearby
• Dot grid reacts to cursor with repulsion displacement
• Two-pass bloom: horizontal blur → vertical blur + composite + vignette
• Theme-aware colors via CSS custom properties (--tint-color)
• Touch support for mobile

Tech Stack

Layer	Technology
Framework	SvelteKit 2 + Svelte 5
Rendering	WebGL with GLSL shaders
Styling	TailwindCSS 4 + DaisyUI 5
Deploy	Cloudflare Workers
Unit Tests	Vitest + jsdom
E2E Tests	Playwright (Chromium)

Getting Started

pnpm install
pnpm dev

Note: Use pnpm — npm will fail with peer dependency conflicts.

Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Type-check + production build
pnpm preview	Preview production build via Wrangler
pnpm check	TypeScript type-check
pnpm test	Run unit tests
pnpm test:e2e	Run end-to-end tests
pnpm gen	Regenerate Cloudflare worker types

Project Structure

src/lib/spacelines/
├── main.ts          # Entry point, animation loop, particle physics
├── color.ts         # OKLCH→RGB conversion, CSS variable reader
├── webgl.ts         # Shader compilation, buffer binding helpers
└── shaders/
    ├── scene.vert   # Particle vertex shader
    ├── scene.frag   # Particle fragment shader
    ├── grid.vert    # Dot grid with mouse repulsion
    ├── grid.frag    # Grid fragment shader
    ├── post.vert    # Fullscreen quad
    ├── blur-h.frag  # Horizontal gaussian blur
    └── post.frag    # Vertical blur + bloom + vignette

License

Private