claude/skills-external/design-motion-principles/references/jhey-tompkins.md

# Jhey Tompkins' Animation Principles

Jhey Tompkins (@jh3yy) is a design engineer known for pushing the boundaries of CSS and creative coding. His approach emphasizes **playful experimentation** — learning through building whimsical projects where the joy of creation drives skill development.

This file is Jhey's **philosophy and decision frameworks** — the judgment for *creative expression* and *easing personality*. Implementation code lives in `motion-cookbook.md` (cross-referenced below).

---

## Core Philosophy: Learn Through Play

> "I went from 'I want to learn X, so how do I fit it into Y' to 'I want to make Y, can I learn X to do it?'"

His key question for any interaction: **"What could this become?"**

**The motivation should be making something cool — learning is a happy side effect.**

### Core Beliefs

- **No idea is a bad idea** — Document every spark, however weird
- **Don't ask "Why?" or "Is this practical?"** — Make what brings you joy first
- **"Useless" demos teach real skills** — CSS art teaches clip-path mastery, border-radius tricks, stacking contexts
- **Lateral learning** — Building diverse demos trains you to switch contexts and rise to challenges
- **You'll never have time to make everything** — And that's okay. The act of documenting ideas matters.

**Keep notebooks everywhere** — including by your bed. Creative sparks happen at random times.

---

## When to Apply Jhey's Mindset

- Creative sites, portfolios, kids apps — contexts where delight is the point
- Learning new techniques
- Personal projects and experiments
- When you're stuck in a creative rut
- Exploring what's possible with new CSS features

---

## The Golden Rule (Even in Play)

> "The best animation is that which goes unnoticed."

Even in playful contexts, effective motion enhances the experience without demanding attention, feels natural and expected, serves a functional purpose, and doesn't fatigue users on repeated interactions.

---

## Easing Has Personality (Decision Framework)

> "Duration is all about timing, and timing has a big impact on the movement's naturalness."

Each easing curve communicates something. **Context matters more than rules.**

> "You wouldn't use 'Elastic' for a bank's website, but it might work perfectly for an energetic site for children."

Brand personality should drive easing choices — a playful brand can use bouncy/elastic easing, a professional brand should use subtle springs or `ease-out`.

**When NOT to use bouncy/elastic easing:**
- Professional/enterprise applications
- Frequently repeated interactions (gets tiresome)
- Error states or serious UI
- When users need to complete tasks quickly

(Easing-feel reference table and the `linear()` recipe for pure-CSS bounce/elastic/spring → cookbook §2.)

---

## Signature Techniques (decision context — code in cookbook)

| Technique | When Jhey reaches for it | Cookbook |
|-----------|--------------------------|----------|
| `linear()` function | Pure-CSS bounce, elastic, spring effects without JS | §2 |
| `@property` | Animating CSS custom properties — type declaration unlocks interpolation | §7 |
| Decomposed transforms | Curved motion paths impossible with a monolithic transform | §7 |
| `animation-fill-mode` | Delayed fade-in sequences — `backwards` prevents the pre-animation flash | §1 |
| Negative delays | "Already in progress" stagger effects | §2 |
| Scoped CSS variables | Varied behavior from a single animation definition | §7 |
| 3D CSS ("think in cubes") | Decompose 3D objects into cuboids; `preserve-3d` + `perspective` | §8 |
| Scroll-driven with duration | Decouple animation timing from scroll speed | §14 |

---

## Why "Useless" CSS Art Matters

CSS art teaches real skills that transfer to production: clip-path mastery, border-radius tricks, stacking contexts, complex gradients, pseudo-element layering. For complex illustrations — break into simple shapes, use pseudo-elements liberally, layer with z-index carefully, use CSS variables for repeated values, don't fear many elements.

---

## When to Experiment vs. Ship

| Situation | Approach |
|-----------|----------|
| Learning a new CSS feature | Build something weird and fun |
| Portfolio piece | Push boundaries, show creativity |
| Personal project | Follow your joy |
| Client work | Apply Jakub's production polish instead |
| High-frequency tool | Apply Emil's restraint instead |

The playful approach is for **learning and exploration**. For production, switch to Jakub or Emil's mindset.

---

## Common Mistakes (Jhey's Perspective)

- **Filtering ideas based on "usefulness" too early** — Make first, judge later
- **Not documenting random creative sparks** — Keep notebooks everywhere
- **Thinking CSS art is useless** — It teaches real skills
- **Focusing on "How do I learn X?" instead of "How do I make Y?"** — Let ideas drive learning
- **Following tutorials without experimenting** — Tutorials teach techniques; experimentation teaches problem-solving
- **Giving up when something doesn't work** — The struggle is where learning happens

---

## Jhey vs. Emil vs. Jakub

| Aspect | Jhey | Emil | Jakub |
|--------|------|------|-------|
| **Focus** | Playful experimentation | Restraint & speed | Subtle polish |
| **Key question** | "What could this become?" | "Should this animate?" | "Is this subtle enough?" |
| **Signature technique** | CSS custom properties | Frequency-based decisions | Blur + opacity + translateY |
| **Ideal context** | Learning & exploration | High-frequency tools | Production polish |

**When to use Jhey**: You're building something where delight is the goal, exploring what's possible, or learning a new technique. The skills transfer to production work later.