3d-spatial
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
- Installs
- 771
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/dylantarre/animation-principles --skill 3d-spatial- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads 3d-spatial automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
3D Spatial Animation
Apply Disney's 12 animation principles to 3D software, VR/AR, and spatial computing environments.
Quick Reference
| Principle | 3D/Spatial Implementation |
|---|---|
| Squash & Stretch | Lattice deformers, blend shapes |
| Anticipation | IK/FK wind-ups, camera pre-motion |
| Staging | Camera angles, lighting, depth |
| Straight Ahead / Pose to Pose | Layered animation vs blocking |
| Follow Through / Overlapping | Bone chains, physics simulation |
| Slow In / Slow Out | F-curve editing, animation curves |
| Arc | IK handles, motion paths in 3D space |
| Secondary Action | Cloth sim, particle systems, environment |
| Timing | Frame timing, VR 90fps requirements |
| Exaggeration | Stylized deformation, pushed poses |
| Solid Drawing | Volume preservation, silhouettes |
| Appeal | Character design, satisfying motion |
Principle Applications
Squash & Stretch: Use lattice or mesh deformers for organic squash. Blend shapes for facial deformation. Scale bones in hierarchies. Always preserve volume—if Y compresses, X/Z expand.
Anticipation: IK rig wind-ups for character animation. Camera pulls back before push-in. Objects coil before release. VR: telegraph actions clearly for user comfort.
Staging: Camera angle sells the action. Three-point lighting directs focus. Depth of field isolates subjects. In VR, use spatial audio and lighting to guide attention.
Straight Ahead vs Pose to Pose: Block key poses first (pose to pose), then refine (spline). Use layered animation—body first, then overlapping elements. Procedural secondary motion is straight ahead.
Follow Through & Overlapping: Bone chains for tails, hair, capes. Physics simulation for cloth and particles. Delay child bones from parents. Jiggle deformers for organic follow-through.
Slow In / Slow Out: F-curves (Blender), Animation Curves (Unity), Graph Editor (Maya). Tangent handles control easing. Flat tangents = slow, steep = fast. Never leave curves linear.
Arc: Motion paths visible in 3D space. IK handles naturally create arcs. Check arcs from multiple camera angles. FK rotation creates inherent arcs in hierarchies.
Secondary Action: Cloth simulation responds to primary motion. Particles emit on impacts. Environment objects react to character. Facial animation supports body action.
Timing: Film: 24fps with motion blur. Games: 60fps minimum. VR: 90fps required (72-120fps). Frame timing affects perceived weight—heavy = slower, light = faster.
Exaggeration: Push poses beyond anatomical limits for style. Smear frames for fast motion. Exaggerated anticipation and follow-through. VR: be careful—exaggeration can cause discomfort.
Solid Drawing: Check silhouettes from all angles. Maintain volume during deformation. Strong poses read in profile. Avoid interpenetration and broken geometry.
Appeal: Character design serves animation needs. Weight and balance feel believable. Movement has personality. In VR, presence and comfort are paramount.
Software Techniques
Blender
# Add follow-through with driver
# On child bone, add driver to rotation
driver.expression = "var * 0.3"
driver.variables["var"].source = parent_bone.rotation
# Physics-based secondary
bpy.ops.object.modifier_add(type='CLOTH')
bpy.context.object.modifiers["Cloth"].settings.quality = 10
Unity
// Spring-based follow through
public class SpringFollow : MonoBehaviour {
public Transform target;
public float springStrength = 10f;
public float damping = 0.5f;
private Vector3 velocity;
void Update() {
Vector3 delta = target.position - transform.position;
velocity += delta * springStrength * Time.deltaTime;
velocity *= 1f - damping * Time.deltaTime;
transform.position += velocity * Time.deltaTime;
}
}
VR/AR Considerations
| Aspect | Requirement |
|---|---|
| Framerate | 90fps minimum, 120fps preferred |
| Motion | Avoid camera animation—user controls view |
| Comfort | Gradual acceleration, avoid sudden motion |
| Scale | Animations must work at world scale |
| Interaction | Clear feedback for hand/controller input |
Performance Notes
- LOD (Level of Detail) for distant animations
- Bake complex simulations when possible
- GPU skinning for character meshes
- Culling animations outside view frustum
- VR: maintain framerate above all else
FAQ
What does the 3d-spatial skill do?
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
How do I install 3d-spatial?
Run npx skills add https://github.com/dylantarre/animation-principles --skill 3d-spatial in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/3d-spatial/ (personal) or .claude/skills/3d-spatial/ (project).
Which AI agents can use 3d-spatial?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is 3d-spatial safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains 3d-spatial?
It is published by dylantarre in dylantarre/animation-principles. It has 771 recorded installs.
More from dylantarre/animation-principles
video-motion-graphics
dylantarre/animation-principles
Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.
mobile-touch
dylantarre/animation-principles
Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.
framer-motion
dylantarre/animation-principles
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
motion-designer
dylantarre/animation-principles
Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.
micro-interactions
dylantarre/animation-principles
Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.
web-motion-design
dylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image