Demos

Create a full-screen interactive particle wave animation using HTML5 Canvas. Thousands of colorful particles should form wave patterns with rainbow hue gradients. Mouse movement should repel nearby particles. Include smooth animation with trail effects.

Build a 3D interactive Golden Gate Bridge scene using Three.js. Include two main towers with suspension cables, a road deck with animated cars driving across, animated water below with waves, and fog atmosphere. Use International Orange color. Add OrbitControls for camera interaction.

Create an interactive 3D solar system with all 8 planets orbiting the sun using Three.js. Include a glowing sun with point light, proper relative orbit speeds, Saturn's rings, Earth's moon, a starfield background, and click-to-identify planet names. Add OrbitControls.

Build a classic Snake game using HTML5 Canvas. Arrow keys to control, eat pink food to grow, avoid walls and self. Show score and high score (localStorage). Include start screen, game over with replay button, and mobile touch D-pad controls. Use cream/pink/black color scheme.

Create a SaaS landing page demo for a fictional product called "Stackwise" - an AI-powered developer analytics tool. Use the Gumroad design system: #F4F4F0 cream background, offset-layer card pattern, pill-shaped buttons (primary bg-black text-white), pink accent for highlights. NO shadows, NO gradients, NO emojis. Sections: Hero with "Ship better code, faster" headline and mock dashboard, Social Proof with company logos, Features Grid with 3 offset cards, Pricing with 3 tiers, and a final CTA with email input.

Build a complete blog page for a fictional tech blog called 'The Stack' with header, featured post hero card, 6-post grid, newsletter CTA, and footer. Use Gumroad design system with cream background, offset-card pattern, pink accent category pills, pill-shaped buttons, and clean typography hierarchy. No shadows, no gradients.

Create a full-screen analytics dashboard for a fictional dev tool called "DevOps Hub" using the Gumroad design system. Include: fixed left sidebar with nav items (Dashboard, Deployments, Incidents, Team, Settings) with pink active border, top bar with pill-shaped search and notification bell, 4 metric cards with offset pattern, fake bar chart for deploy frequency (Mon-Sun), fake line chart using CSS dots, a recent deploys table with status badges, and an incidents panel. Use cream background (#F4F4F0), no shadows, no gradients, no emojis.

Create a split-pane live markdown editor using the Gumroad design system. Editor on left with monospace textarea and line numbers, rendered preview on right. Toolbar with Bold, Italic, Code, Link, H1, H2, List, Quote as pill buttons. Preview renders headings, code blocks (dark bg), links in pink, lists, blockquotes with pink left border, tables, and task lists. Sync scroll between panes. Word count bar between editor and preview showing words, chars, reading time. Export buttons for Copy HTML and Copy Markdown. Use regex-based markdown rendering with no npm libraries. Cream background (#F4F4F0), white panels with border-2 border-black rounded-2xl, no shadows, no gradients.

Build a beautiful todo app with categories, drag-to-reorder, local storage persistence, and a clean minimal design. Use cream background, black borders, pill-shaped buttons, and pink accent color.

Build a weather dashboard widget showing a 5-day forecast with animated weather icons (sun, rain, clouds, snow using CSS animations), temperature graphs using CSS bars, and a location search input. Use cream background, black borders, pill-shaped buttons.

Create a polished AI chat interface similar to ChatGPT. Include: a sidebar with conversation history, a main chat area with message bubbles (user on right, assistant on left), a text input with send button at the bottom, markdown rendering in assistant messages with code blocks, typing indicator animation, and a model selector dropdown. Use the Gumroad design system with cream background, black borders, pill-shaped buttons. No shadows, no gradients.

Create a polished AI chat interface similar to ChatGPT. Include: a sidebar with conversation history, a main chat area with message bubbles (user on right, assistant on left), a text input with send button at the bottom, markdown rendering in assistant messages with code blocks, typing indicator animation, and a model selector dropdown. Use the Gumroad design system with cream background, black borders, pill-shaped buttons. No shadows, no gradients.

Build a drag-and-drop Kanban board with columns: Backlog, In Progress, Review, Done. Each card shows title, assignee avatar, priority badge (Low/Medium/High), and due date. Support adding new cards via a form, dragging cards between columns with visual feedback, and card count per column. Include a board title "Project Alpha" and filter by assignee. Use the Gumroad design system: cream background, black borders, pill-shaped buttons, pink accent. No shadows, no gradients.

Build a drag-and-drop Kanban board with columns: Backlog, In Progress, Review, Done. Each card shows title, assignee avatar, priority badge (Low/Medium/High), and due date. Support adding new cards via a form, dragging cards between columns with visual feedback, and card count per column. Include a board title "Project Alpha" and filter by assignee. Use the Gumroad design system: cream background, black borders, pill-shaped buttons, pink accent. No shadows, no gradients.

Create a code editor with syntax highlighting for JavaScript/TypeScript. Include: line numbers, a file tab bar with multiple open files, a minimap-style scrollbar, bracket matching highlights, a bottom status bar showing line/col/language/encoding, and a command palette triggered by Ctrl+K. Support multiple themes (light/dark/monokai). Render syntax highlighting using regex tokenization. Use monospace font, no external libraries.

Create a code editor with syntax highlighting for JavaScript/TypeScript. Include: line numbers, a file tab bar with multiple open files, a minimap-style scrollbar, bracket matching highlights, a bottom status bar showing line/col/language/encoding, and a command palette triggered by Ctrl+K. Support multiple themes (light/dark/monokai). Render syntax highlighting using regex tokenization. Use monospace font, no external libraries.

Build a comprehensive analytics dashboard for a fictional SaaS product called "Metrix". Include: a top bar with date range picker, 6 KPI cards (MRR, ARR, Churn Rate, Active Users, NPS, LTV) with sparkline trends, a large area chart for revenue over 12 months, a donut chart for traffic sources, a bar chart for top pages, a world map heat overlay showing user distribution by region, and a real-time activity feed. All data should be hardcoded. Use the Gumroad design system: cream background, black borders, pill buttons, pink accent. No shadows, no gradients.

Build a comprehensive analytics dashboard for a fictional SaaS product called "Metrix". Include: a top bar with date range picker, 6 KPI cards (MRR, ARR, Churn Rate, Active Users, NPS, LTV) with sparkline trends, a large area chart for revenue over 12 months, a donut chart for traffic sources, a bar chart for top pages, a world map heat overlay showing user distribution by region, and a real-time activity feed. All data should be hardcoded. Use the Gumroad design system: cream background, black borders, pill buttons, pink accent. No shadows, no gradients.

Create a product page for a fictional premium headphone called "Studio Pro X". Include: an image gallery with thumbnail navigation and zoom on hover, product title/price/description, size and color selectors, an Add to Cart button with quantity picker, a reviews section with 5-star ratings and 4 sample reviews, a specs accordion, and a sticky "Add to Cart" bar that appears on scroll. Use the Gumroad design system: cream background, black borders, pill-shaped buttons, pink accent. No shadows, no gradients.

Create a product page for a fictional premium headphone called "Studio Pro X". Include: an image gallery with thumbnail navigation and zoom on hover, product title/price/description, size and color selectors, an Add to Cart button with quantity picker, a reviews section with 5-star ratings and 4 sample reviews, a specs accordion, and a sticky "Add to Cart" bar that appears on scroll. Use the Gumroad design system: cream background, black borders, pill-shaped buttons, pink accent. No shadows, no gradients.