> Canonical URL: https://codingcat.dev/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-4-spring-tiers # Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot | Impeccable: Automated Design Review & Polish for AI UI and Motion | CodingCat.dev Course [🧶 Impeccable: Automated Design Review & Polish for AI UI and Motion](/course/impeccable-automated-design-critique)Section 1.4 · Lesson 4 of 5[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design)[![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video](/topic/video)[← Prev Lesson](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-3-type-scale)[Next Lesson →](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-5-polish-gate) # Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot ![Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot Architecture Diagram](https://cdn.sanity.io/images/hfh83o0w/production/8959946c17c836c20912d46409b46d3a1c0a507c-1376x768.png?w=1376&q=82&fit=max&auto=format) ## 1. The 15-Second Hook Welcome to Lesson 4 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot and see how it powers our deterministic 3D AJ and code-rendered video pipeline. ## 2. Architecture Mental Model (Visual Diagram) Look at the architecture diagram: on the left, vibe-prompted animations suffer from timer drift and unreviewed layout bugs. On the right, Spring Tiers and Mass Rules enforce a deterministic frame contract. ## 3. Show Me the Code (docs/style_guide.md) Copied! 🐾📄 docs/style_guide.mdtypescript ``` ## Impeccable & CodingCat.dev Motion Style Contract - Banned: centered title on generic gradient, everything fading in, glowing neon boxes. - Palette: Obsidian `#0B1326`, Chalk `#FAF9FC`, Royal Purple `#7C3AED`, Electric Lime `#C5E86C`. - Typography: `Nunito` 900 display, `Inter` UI, `JetBrains Mono` code, `Virgil` diagrams. - Pacing: Something new on screen every 2 to 4 seconds; hold headlines long enough to read. ``` In docs/style_guide.md, we wire up the production implementation so both our browser runtime and headless renderer stay 100 percent synchronized. ## 4. Production Trade-Off Matrix DimensionDeterministic 2026 PatternLegacy Anti-PatternWhy It Matters in ProductionDeterminismPure function of time t via window.seek(t)Non-deterministic timers & Math.random()Any frame renders identically on demand.Visual PolishContact-sheet critique loop + W3C tokensFirst unreviewed render ships as finalEliminates overlapping text and dead beats.3D & Mascot RigUnified 57-path 2D SVG + Three.js 3D GLB AJStatic flat raster imagesInteractive orbital 3D + 120 BPM lip-sync.Production Cost$0 open-source local RTX 5090 pipeline$1,200+ agency fee or per-minute SaaS cliffScales across 95+ lessons with zero marginal cost. When we compare this deterministic 2026 pattern against legacy workflows in our trade-off matrix, we get exact frame reproducibility, automated critique gates, and zero licensing cost. ## 5. Verdict & AJ Pro-Tip > AJ Pro-Tip: Always verify frame 300 twice during your contact-sheet critique pass to confirm your Spring Tiers setup has zero non-deterministic state leaks. Adopt Spring Tiers inside your studio folder today so every future launch film and 3D mascot animation builds on a reusable harness. Hit Subscribe and let's continue! ✏️ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Impeccable: Automated Design Review & Polish for…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Impeccable: Automated Design Review & Polish for AI UI and Motion: Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot: start with Core Architecture & Deterministic Implementation, implement Impeccable: Automated Design Review & Polish for AI UI and Motion, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp) Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Alex Patterson next to a dark-mode architecture diagram of 3D AJ and the 14 open-source video repositories](https://cdn.sanity.io/images/hfh83o0w/production/1a6c5bade322565ed55c3d0999dfe3c0332055c4-1376x768.png?w=1376&q=82&fit=max&auto=format)](/post/14-open-source-repos-code-driven-video-how-we-built-3d-aj)November 4, 2026[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video](/topic/video) ### [The 14 Open-Source Repos Powering Code-Driven Video in 2026: How We Built 3D AJ the Cat](/post/14-open-source-repos-code-driven-video-how-we-built-3d-aj) Why viral 'one-prompt' AI videos are actually 9,500-character production harnesses backed by deterministic frame functions, closed-form springs, and contact-sheet critique loops. Here is the full architectural breakdown of all 14 open-source repos and how we used them to build our interactive 3D AJ the Cat mascot and Course Factory. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[Course Outline](/course/impeccable-automated-design-critique) ## Impeccable: Automated Design Review & Polish for AI UI and Motion 4/51 ### Core Architecture & Deterministic Implementation - [1.1Lesson 1: Why Default LLM Prompts Produce Centered Gradient Slop ('Brief Contagion')](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-1-slop-trap) - [1.2Lesson 2: Installing `pbakaus/impeccable` & Wiring Design Gates into `CLAUDE.md`](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-2-impeccable) - [1.3Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-3-type-scale) - [1.4Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot▶](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-4-spring-tiers) - [1.5Lesson 5: Automated Pre-Export Polish Passes on Storyboards & Contact Sheets](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-5-polish-gate) @CodingCatDev on YouTube62.5K / 100K Subscribe for new course lessons and architecture deep dives every week. [Subscribe for New Lessons →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)