Back to categories
Category

Agent Skills in category: creative-coding

89 skills match this category. Browse curated collections and explore related Agent Skills.

r3f-geometry

BufferGeometry creation, built-in geometries, custom geometry with buffer attributes, instanced meshes for rendering thousands of objects, and geometry manipulation. Use when creating custom shapes, optimizing with instancing, or working with vertex data directly.

three.jsreact-three-fiberbuffergeometryinstancing
Bbeierle12
Bbeierle12
3

particles-lifecycle

Particle lifecycle management—emission/spawning, death conditions, object pooling, trails, fade-in/out, and state transitions. Use when particles need birth/death cycles, continuous emission, trail effects, or memory-efficient recycling.

particle-systemsmemory-managementemissionfade-effects
Bbeierle12
Bbeierle12
3

r3f-fundamentals

React Three Fiber core setup, Canvas configuration, scene hierarchy, camera systems, lighting, render loop, and React integration patterns. Use when setting up a new R3F project, configuring the Canvas component, managing scene structure, or understanding the declarative Three.js-in-React paradigm. The foundational skill that all other R3F skills depend on.

reactthreejsreact-three-fibercanvas
Bbeierle12
Bbeierle12
3

audio-router

Router for audio domain including playback, analysis, and audio-reactive visuals. Use when implementing any audio functionality including music, sound effects, visualizers, or audio-driven animations. Routes to 3 specialized skills.

audioaudio-playbackaudio-analysisvisualization
Bbeierle12
Bbeierle12
3

gsap-scrolltrigger

Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.

gsapscroll-animationpinningscrubbing
Bbeierle12
Bbeierle12
3

postfx-router

Router for Three.js post-processing effects domain. Use when implementing visual effects like bloom, glow, chromatic aberration, vignette, depth of field, color grading, or any screen-space effects. Routes to 3 specialized skills for bloom, effects, and composer setup.

three.jspost-processingvisual-effectsscreen-space-effects
Bbeierle12
Bbeierle12
3

particles-gpu

GPU-based particle systems using instanced rendering, buffer attributes, Points geometry, and custom shaders. Use when rendering thousands to millions of particles efficiently, creating particle effects like snow, rain, stars, or abstract visualizations.

gpushader-programmingparticle-systemsinstanced-rendering
Bbeierle12
Bbeierle12
3

gsap-sequencing

Complex GSAP timelines including labels, callbacks, nested timelines, and position parameters. Use when orchestrating multi-step animations, building animation sequences, or creating coordinated motion. Essential for cinematic animations and complex UI choreography.

gsapanimationtimelineui
Bbeierle12
Bbeierle12
3

immersive-visuals-router

Master router for immersive visual experiences combining React Three Fiber, shaders, particles, post-processing, GSAP animation, and audio. Use when building 3D web experiences, visualizers, creative coding projects, interactive installations, or any project requiring multiple visual technologies. Dispatches to 6 specialized domain routers covering 29 total skills.

react-three-fibershader-programmingparticle-systemspost-processing
Bbeierle12
Bbeierle12
3

r3f-drei

@react-three/drei helper library—OrbitControls, Text, Environment, useTexture, useGLTF, Html, Billboard, and 50+ abstractions that simplify common R3F patterns. Use when implementing camera controls, loading assets, rendering text, or needing common 3D utilities.

react-three-fiberthreejs3d-graphics3d-utilities
Bbeierle12
Bbeierle12
3

shader-sdf

Signed Distance Functions (SDFs) in GLSL—2D/3D shape primitives, boolean operations (union, intersection, subtraction), smooth blending, repetition, and raymarching fundamentals. Use when creating procedural shapes, text effects, smooth morphing, or raymarched 3D scenes.

graphics-programmingglslraymarchingprocedural-generation
Bbeierle12
Bbeierle12
3

shader-fundamentals

GLSL shader fundamentals—vertex and fragment shaders, uniforms, varyings, attributes, coordinate systems, built-in variables, and data types. Use when writing custom shaders, understanding the graphics pipeline, or debugging shader code. The foundational skill for all shader work.

glslshader-programminggraphics-programmingvertex-shaders
Bbeierle12
Bbeierle12
3

audio-reactive

Binding audio analysis data to visual parameters including smoothing, beat detection responses, and frequency-to-visual mappings. Use when creating audio visualizers, music-reactive animations, or any visual effect driven by audio input.

audio-reactiveaudio-visualizationbeat-detectionfrequency-analysis
Bbeierle12
Bbeierle12
3

shader-router

Decision framework for GLSL shader projects. Routes to specialized shader skills (fundamentals, noise, SDF, effects) based on task requirements. Use when starting a shader project or needing guidance on which shader techniques to combine.

glslshadergraphics-programmingdecision-framework
Bbeierle12
Bbeierle12
3

postfx-composer

EffectComposer setup and architecture for Three.js post-processing pipelines. Use when setting up multi-pass rendering, combining effects, creating custom passes, managing render targets, or building reusable effect stacks. Foundation skill for all post-processing work.

threejspost-processingeffect-composermulti-pass-rendering
Bbeierle12
Bbeierle12
3

shader-noise

Procedural noise functions in GLSL—Perlin, simplex, Worley/cellular, value noise, FBM (Fractal Brownian Motion), turbulence, and domain warping. Use when creating organic textures, terrain, clouds, water, fire, or any natural-looking procedural patterns.

glslshader-programmingprocedural-generationnoise
Bbeierle12
Bbeierle12
3

postfx-bloom

Bloom and glow effects using Three.js UnrealBloomPass with React Three Fiber. Use when implementing glow, bloom, luminance-based effects, selective bloom on specific meshes, or neon/ethereal lighting. Essential for cyberpunk aesthetics, energy effects, magic spells, and UI glow.

threejsreact-three-fiberpost-processingbloom
Bbeierle12
Bbeierle12
3

postfx-effects

Post-processing visual effects including chromatic aberration, vignette, depth of field, film grain, color grading, and LUT support. Use when adding cinematic polish, retro aesthetics, camera simulation, or atmospheric effects to 3D scenes. Essential for mood, style, and visual storytelling.

post-processingvisual-effectscolor-grading3d-scenes
Bbeierle12
Bbeierle12
3

Page 2 of 5 · 89 results