Threejs Procedural Animation Agent Skill
Build advanced procedural animation in Three.js. Use for launch kinematics, gravity turns, staging, spin docking, target-frame decomposition, spring-follow motion, rotating-frame alignment, peeling debris, analytic transform timelines, frame-rate-independent response, and quaternion control.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/scottstts/Threejs-Awesome-Graphics-Agent-Skills --skill threejs-procedural-animationThe instruction itself
4 sections, as written by the authorProcedural Animation
Animate semantic state, not unrelated transform curves. Define phases,
coordinate frames, velocities, and ownership before writing per-frame updates.
Build order
- Define the timeline phases and event boundaries.
- Choose the frame for each motion: world, subject local, orbital radial,
docking axis, or camera shot.
- Derive target position/orientation from that frame.
- Use analytic kinematics for authored travel and springs for responsive
convergence.
- Preserve world transforms when detaching children from a hierarchy.
- Separate translation, alignment, spin, and secondary debris state.
- Clamp integration delta and reset every state variable on replay/disposal.
Read references/procedural-motion-and-docking-systems.md
for the launch, staging, docking, debris, spring, quaternion, and
frame-rate-independent response implementations.
Non-negotiable rules
- Use elapsed seconds and
deltaSeconds; do not make motion frame-count based. - Derive orientation from direction/frame, then apply roll or spin as a
separate quaternion.
- Decompose docking error into axial and radial components.
- Switch from spring convergence to an exact terminal pose at the end of a
sequence.
- When reparenting an animated object, capture world position, quaternion, and
scale before removal.
- Use seeded randomness when motion must be reproducible.
- Keep visual shake in a bounded envelope and separate it from trajectory.
Routing boundary
Use $threejs-camera-direction for shot composition and camera handoffs.
Use $threejs-procedural-vfx when the deliverable is primarily plasma, sparks,
or effect pooling rather than object transform motion.
Other skills for the same job
different authors, same section of the catalogue
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.
Downloads videos from YouTube and other platforms for offline viewing, editing, or archival. Handles various formats and quality options.
Lightweight WSI tile extraction and preprocessing. Use for basic slide processing tissue detection, tile extraction, stain normalization for H&E images. Best for simple pipelines, dataset preparation, quick tile-based analysis. For advanced spatial proteomics, multiplexed imaging, or deep learning pipelines use pathml.
Microscopy data management platform. Access images via Python, retrieve datasets, analyze pixels, manage ROIs/annotations, batch processing, for high-content screening and microscopy workflows.
Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.
This skill should be used when working with pre-trained transformer models for natural language processing, computer vision, audio, or multimodal tasks. Use for text generation, classification, question answering, translation, summarization, image classification, object detection, speech recognition, and fine-tuning models on custom datasets.
How to use it
Take scottstts/threejs-procedural-animation from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.