Add highlighter effect experiments lab page

[MaggieAppleton]

Summary

Add a comprehensive experimental lab page showcasing 10 different approaches to rendering realistic highlighter marks on text, from simple CSS gradients to WebGL fragment shaders.

Key Changes

• New page: src/pages/highlighter-experiments.astro — a standalone lab page (not linked from navigation) that demonstrates various highlighter rendering techniques
• 10 experimental approaches:
  1. Control — flat CSS gradient baseline
  2. Randomised layered CSS gradients with clip-path and rotation
  3. SVG displacement filter with per-mark noise seeds
  4. Displacement + streaky ink texture with end pooling
  5. Wet-bleed threshold filter for organic edges
  6. Procedural SVG blob paths with Catmull-Rom smoothing
  7. Multi-pass overlapping strokes with staggered ends
  8. Canvas 2D chisel-tip simulation with stamping and fibre streaks
  9. WebGL fragment shader with domain-warped edges and anisotropic streaks
  10. Advanced shader v2 with chisel ends, pooling, ghost passes, and hue shifts

Notable Implementation Details

• Seeded randomization: Uses mulberry32 PRNG with unique seeds per mark to ensure reproducibility while maintaining visual variety
• Dynamic ink rendering: All effects are generated client-side and positioned relative to text spans using getClientRects()
• Re-roll functionality: Button to regenerate all ink with new random seeds, demonstrating that no two marks are identical
• Responsive: Ink repositions on window resize with debouncing
• Font loading: Waits for custom fonts (Canela Text, Canela Deck) to load before measuring text and rendering ink
• WebGL optimization: Shared canvas and shader programs for efficient rendering of shader-based effects
• Blend modes: Uses mix-blend-mode: multiply to composite ink layers realistically
• Custom colors: Supports multiple highlighter colors (yellow, pink, green, orange, blue) via data-color attributes

https://claude.ai/code/session_01BP14YBvgDMt8PDQNSwrLjT

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
maggieappleton-com-v3	Ignored		Jul 2, 2026 3:40pm