# How to Configure the MOTION_INTENSITY Dial in Taste Skill
> Learn how to configure the MOTION_INTENSITY dial in the Taste Skill. Set values from 1-10 and understand the requirements for higher settings like prefers-reduced-motion.
- Repository: [Leon Lin/taste-skill](https://github.com/Leonxlnx/taste-skill)
- Tags: how-to-guide
- Published: 2026-06-06
---
**Configure the MOTION_INTENSITY dial by setting a value between 1 and 10 in the [`SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/SKILL.md) front-matter, where values above 3 require `prefers-reduced-motion` guards and values above 4 mandate at least one real animation implementation.**
The **MOTION_INTENSITY** dial in the Leonxlnx/taste-skill repository controls the depth of animation in generated frontend code, ranging from static hover states to cinematic physics-based interactions. When you configure this dial, you determine whether the skill emits simple CSS transitions or complex GSAP ScrollTrigger choreography based on the configuration in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md). Understanding these settings ensures your generated components match both your design vision and accessibility requirements.
## Understanding the MOTION_INTENSITY Dial Architecture
The Taste Skill uses three core dials defined in the skill's front-matter to drive design decisions. The **MOTION_INTENSITY** dial specifically controls animation depth on a scale of 1 to 10:
- **1-3**: Static layouts with only hover and active CSS states
- **4-7**: Fluid CSS transitions and simple scroll-reveal animations
- **8-10**: Advanced choreography with GSAP ScrollTrigger, magnetic micro-physics, and perpetual micro-interactions
According to the source code in [`skills/taste-skill/SKILL.md`](https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md), the default baseline is set to **6** (as part of the 8/6/4 variance/intensity/density baseline). Any value greater than 3 must honor the `prefers-reduced-motion` media query, and values greater than 4 trigger the "motion claimed, motion shown" rule requiring at least one actual animation implementation.
## Configuring the Dial in SKILL.md
The dial lives in the YAML front-matter of the skill definition file. Unlike runtime configuration files, the agent reads this value at generation time to determine which code snippets to emit.
```yaml
# https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md
---
name: design-taste-frontend
description: Anti-slop frontend skill …
---
...
* **`DESIGN_VARIANCE: 8`** - 1 = Perfect Symmetry, 10 = Artsy Chaos
* **`MOTION_INTENSITY: 6`** - 1 = Static, 10 = Cinematic / Physics
* **`VISUAL_DENSITY: 4`** - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data
```
You can override these defaults directly in your prompt; the agent treats prompt overrides as authoritative values. For a low-motion landing page, set the value to 2 or 3 to restrict output to static components with hover states only.
## Implementing Motion by Intensity Level
The engine interprets the dial value to determine which animation patterns are allowed in the generated code.
### Level 1-3: Static and Hover States
At intensity levels 1 through 3, the skill generates only CSS `:hover` and `:active` states. No scroll-triggered or continuous animations are permitted, making this ideal for accessibility-first or minimalist designs.
### Level 4-7: Fluid CSS Transitions
Mid-range values enable fluid CSS transitions and simple scroll-reveal animations using CSS `transition` properties. When you configure MOTION_INTENSITY in this range, expect code emitting `transition: all 0.3s ease-out` patterns and Intersection Observer-based reveal effects.
### Level 8-10: Advanced Choreography
High-intensity configurations trigger the emission of GSAP-based scroll-driven timelines and magnetic hover effects. The skill injects components using `gsap/ScrollTrigger` and `motion/react` for physics-based interactions, but only when the dial exceeds 5 for magnetic effects or 8 for scroll choreography.
## Accessibility Guardrails for MOTION_INTENSITY
Any configuration above 3 requires implementation of reduced-motion support. The generated code must check `prefers-reduced-motion` before executing animations.
```tsx
// src/components/Hero.tsx
"use client";
import { motion, useReducedMotion } from "motion/react";
export function Hero() {
const reduce = useReducedMotion(); // respects prefers-reduced-motion
const shouldAnimate = !reduce && process.env.MOTION_INTENSITY > 3;
return (
{shouldAnimate ? (
Welcome to Your Brand
) : (
Welcome to Your Brand
)}
);
}
```
The `useReducedMotion` hook from `motion/react` provides the accessibility check, while `process.env.MOTION_INTENSITY` represents the injected dial value from the skill generator.
## Advanced Implementation Examples
### Magnetic Micro-physics (MOTION_INTENSITY > 5)
When the dial exceeds 5, the skill emits magnetic button components using `useMotionValue` and `useTransform` from Motion:
```tsx
// src/components/MagneticButton.tsx
"use client";
import { motion, useMotionValue, useTransform } from "motion/react";
export function MagneticButton({ children }: { children: React.ReactNode }) {
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
const rotateX = useTransform(mouseY, [0, 200], [15, -15]);
const rotateY = useTransform(mouseX, [0, 200], [-15, 15]);
return (
{
mouseX.set(e.clientX);
mouseY.set(e.clientY);
}}
onMouseLeave={() => {
mouseX.set(0);
mouseY.set(0);
}}
>
{children}
);
}
```
### Scroll-Driven GSAP Animation (MOTION_INTENSITY ≥ 8)
For cinematic intensity levels (8-10), the skill generates ScrollTrigger components:
```tsx
// src/components/StickyStack.tsx
"use client";
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";
gsap.registerPlugin(ScrollTrigger);
export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
const ref = useRef(null);
const reduce = useReducedMotion();
useEffect(() => {
if (reduce || !ref.current) return;
const ctx = gsap.context(() => {
const cardEls = gsap.utils.toArray(".stack-card");
cardEls.forEach((card, i) => {
if (i === cardEls.length - 1) return;
ScrollTrigger.create({
trigger: card,
start: "top top",
pin: true,
pinSpacing: false,
});
gsap.to(card, {
scale: 0.92,
opacity: 0.55,
scrollTrigger: {
trigger: cardEls[i + 1],
start: "top bottom",
end: "top top",
scrub: true,
},
});
});
}, ref);
return () => ctx.revert();
}, [reduce]);
return (
{cards.map((c, i) => (
{c}
))}