Skip to main content
JG is here with you โœจ

Interactive Demos

Learn by doing. Interactive component showcases, animation experiments, and visual debugging tools.

Each demo is a hands-on playground where you can tweak parameters, see live results, and understand the underlying code.

๐ŸŽฎ Live Demos

โšก

Framer Motion Showcase

๐ŸŽฎ Live Now

Live interactive demo with spring physics, drag gestures, layout animations, and stagger effects. Tweak parameters in real-time!

What You Can Do

  • โ–ธSpring physics with adjustable stiffness & damping
  • โ–ธDrag gestures with constraints and elastic boundaries
  • โ–ธLayout FLIP animations (click to expand)
  • โ–ธOrchestrated stagger animations with variants

Tech Stack

Framer MotionReactTypeScript

Key Learnings

Master animation timing, easing functions, and interactive motion patterns

Launch Interactive Demoโ†’
๐ŸŽญ

Component State Visualizer

๐ŸŽฎ Live Now

See React component lifecycle and state changes in real-time with interactive controls.

What You Can Do

  • โ–ธuseState, useEffect, and useRef visualized
  • โ–ธProps drilling vs Context API comparison
  • โ–ธRe-render triggers and optimization techniques
  • โ–ธCustom hooks with visual debugging

Tech Stack

ReactTypeScriptZustand

Key Learnings

Master React's rendering behavior and performance optimization patterns

Launch Interactive Demoโ†’
๐Ÿ“

CSS Grid & Flexbox Playground

๐ŸŽฎ Live Now

Interactive layout builder where you adjust properties and see the code + result side-by-side.

What You Can Do

  • โ–ธGrid template areas with visual editor
  • โ–ธFlexbox alignment, justify, and wrapping
  • โ–ธResponsive breakpoints in action
  • โ–ธGap, padding, and margin spacing

Tech Stack

CSS GridFlexboxTailwind

Key Learnings

Build muscle memory for modern CSS layouts through hands-on experimentation

Launch Interactive Demoโ†’
๐ŸŒ

API Request Visualizer

๐ŸŽฎ Live Now

Watch HTTP requests flow through your app with timing, status codes, and error handling.

What You Can Do

  • โ–ธRequest/response cycle breakdown
  • โ–ธLoading states and skeleton UIs
  • โ–ธError boundaries and retry logic
  • โ–ธCaching strategies (stale-while-revalidate)

Tech Stack

Fetch APIAxiosReact Query

Key Learnings

Understand async data flow and build robust error handling patterns

Launch Interactive Demoโ†’
๐ŸŽจ

WebGL & Canvas Experiments

๐ŸŽฎ Live Now

Interactive graphics programming with Three.js, shaders, and particle systems.

What You Can Do

  • โ–ธ3D object manipulation (rotate, scale, position)
  • โ–ธShader effects (glow, distortion, ripple)
  • โ–ธParticle physics and collision detection
  • โ–ธPerformance monitoring (FPS, draw calls)

Tech Stack

Three.jsWebGLGLSL Shaders

Key Learnings

Explore creative coding and GPU-accelerated graphics for web

Launch Interactive Demoโ†’
โ™ฟ

Accessibility Deep Dive

๐ŸŽฎ Live Now

Experience your app as screen reader users do, with live ARIA attribute visualizations.

What You Can Do

  • โ–ธScreen reader navigation simulation
  • โ–ธKeyboard-only interaction flow
  • โ–ธColor contrast analyzer
  • โ–ธFocus management and skip links

Tech Stack

ARIAWCAG Guidelinesaxe-core

Key Learnings

Build empathy and technical skills for inclusive web development

Launch Interactive Demoโ†’

๐Ÿšง Coming Soon

๐Ÿšง Building These Out Now

These demos are being built based on real patterns from production projects. Each one will be fully interactive with live code editing and instant preview.

Open to AI-Focused Roles

AI Sales โ€ข AI Strategy โ€ข AI Success โ€ข Creative Tech โ€ข Toronto / Remote

Let's connect โ†’
Terms of ServiceLicense AgreementPrivacy Policy
Copyright ยฉ 2026 JMFG. All rights reserved.