Draft: A Technical Playground
Role: Solo Developer & Designer
Type: Hobby Project / Technical Showcase
Status: Live (not actively maintained)
Focus: WebGL effects, animation systems, loading optimization, and workflow automation
Why Draft Exists
Draft started as a sandbox to experiment with techniques I wanted to master: WebGL shaders, complex React animations, performance optimization, and automated content workflows. Rather than building throwaway demos, I created a cohesive product that showcases these experiments in context.
It's a newsletter platform on the surface, but underneath it's a playground for pushing what's possible with modern web technologies.
The Hero Section
The landing experience sets the tone immediately. A WebGL-powered background with dynamic particle effects responds to scroll position and mouse movement. The hero text uses a staggered reveal animation with custom easing curves, creating a sense of craftsmanship from the first interaction.
Animation highlight: Particle density and movement speed adjust based on viewport size, maintaining visual impact without sacrificing performance on mobile devices.
Features List
The features section uses scroll-triggered animations with intersection observers. Each feature card enters with a combination of opacity fade, vertical translation, and subtle rotation—all orchestrated with staggered timing.
Animation highlight: Icons within each card have their own micro-animations that trigger on hover, using CSS transforms combined with SVG stroke animations for a hand-drawn effect.
Overview Section
The overview breaks down the platform's value proposition with animated data visualizations. Numbers count up as they enter the viewport, charts draw themselves, and content blocks slide into place with physics-based spring animations.
Animation highlight: A custom React hook manages animation state across multiple elements, coordinating timing so the eye naturally flows through the content hierarchy.
Call to Action
The CTA section pulls together all the animation techniques into a final crescendo. Background gradients shift subtly, the subscribe form has satisfying micro-interactions, and success states use confetti-style particle bursts.
Animation highlight: Button hover states use a liquid morphing effect achieved through SVG filters, giving tactile feedback that feels more physical than typical CSS transitions.
Newsletter Automation with n8n
Beyond the frontend experiments, Draft includes a self-hosted automation system powered by n8n. This node-based workflow platform handles the entire newsletter pipeline: research aggregation, content curation, draft generation, and scheduled publishing.
The automation workflow pulls from multiple RSS feeds and APIs, filters content based on relevance scoring, generates newsletter drafts using AI assistance, and queues them for review. It's a practical exploration of how automation can reduce the friction of consistent content creation.
Key workflow components:
- RSS feed aggregation from curated sources
- Content relevance scoring and filtering
- AI-assisted draft generation
- Scheduled review notifications
- One-click publishing to subscriber list
Performance Considerations
With all these animations and WebGL effects, performance was a constant consideration. The site uses:
- Code splitting - WebGL libraries load only when needed
- Animation throttling - Reduced motion for users who prefer it
- Progressive enhancement - Core content works without JavaScript
- Lazy loading - Heavy assets load as they approach the viewport
Current Status
Draft is live at ridethedraft.io but isn't actively maintained. It serves its purpose as a technical showcase—a living portfolio piece that demonstrates animation techniques, WebGL integration, and automation workflows in a real-world context.
The experiments here have directly informed work on other projects, making Draft exactly what it was meant to be: a playground that pays dividends.
Last updated: November 2025