FreshTechBro

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.

Wraps React components with motion primitives that handle spring physics, gestures, and scroll triggers — turning static layouts into fluid, interactive interfaces without custom animation code.

Writes declarative React components that render 3D geometry, lighting, and animation via Three.js. Handles state, interactivity, and reusable scene components without boilerplate.

Automates Blender-to-glTF export pipelines, bakes textures, compresses geometry, and outputs web-ready 3D assets optimized for Three.js or Babylon.js without manual clicks.

Translates current design trends—bold minimalism, smooth interactions, accessibility-first—into implementation patterns. Recommends libraries and critique points for motion, performance, and usability.

Takes After Effects animations exported as JSON and embeds them into React or web apps with full interactivity — no re-creation needed. Handles play states, looping, and sync.

Accesses 240+ pre-built React components (Magic UI + React Bits) with animations, Tailwind styling, and TypeScript ready to paste into landing pages or dashboards without custom animation work.

Builds a Spline scene with animated objects, interactive states, and export-ready React code. No Three.js knowledge required—click and drag to compose.

Combines Three.js, GSAP, React Three Fiber, and Motion into a coherent architecture. Handles state sync, performance bottlenecks, and scroll-driven 3D without library conflicts.

Generates GSAP and ScrollTrigger code for parallax, pinned sections, and element animations tied to scroll position. Handles timelines, tweens, and Three.js scenes.

Renders thousands of sprites, particles, and animations at 60 FPS using PixiJS. Handles sprite sheets, filters, and interactive canvas layers without the boilerplate of raw WebGL.

Generates JavaScript animation code using Anime.js—perfect for staggered sequences, SVG morphing, and timed keyframe choreography. Works in vanilla JS, React, and plain HTML.

Implements Locomotive Scroll library for smooth scrolling, parallax layers, and scroll-triggered animations. Works with GSAP for advanced effects and viewport-based visibility.

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.

Adds subtle 3D tilts, parallax layers, and pseudo-3D illustrations to landing pages and cards using lightweight libraries. No heavy framework overhead—loads in milliseconds.

Scaffolds a Babylon.js scene with physics, lighting, and materials. Handles model loading, camera controls, and real-time rendering so you focus on the interaction, not WebGL plumbing.

Implements AOS (Animate On Scroll) library to trigger fade, slide, and zoom effects on page elements as they enter the viewport — no JavaScript needed.

Uses spring dynamics and gesture integration to create natural-feeling animations that respond to user input. Handles inertia, bounce, and momentum without manual easing curves.

Integrates Barba.js and GSAP to swap pages without reloading—users stay in flow while content animates in and out. Handles routing and transition hooks.

Generates PBR material workflows and texture exports optimized for Three.js, Babylon.js, Unity, or Unreal—with baked settings for real-time rendering and web performance.

Scaffolds a WebXR scene in HTML—no Three.js knowledge needed. Handles entity setup, interactions, and asset loading so you describe what you want, not the math.

Scaffolds a WebGL game engine structure with entity-component patterns, physics hooks, and a visual editor so you can iterate without recompiling. Faster than Three.js for game logic.

Walks you through designing a skill: defining the trigger, naming the outcome, structuring the body, and testing it. No coding needed—write it in Markdown.