Motion in Suede  🔗 **Source:** [Motion in Suede](https://briangardner.com/suede-motion/) > [!note]+ Document Notes > --- > tags: [wordpress, web-design, motion-design, animation, block-themes, ux] > author: Brian Gardner > source: briangardner.com > reference: https://briangardner.com/suede-motion/ > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > --- > # 🏷️ Title: Motion in Suede > ## 🧭 Table of Contents > - [📝 Summary](#-summary) > - [📖 Main Content](#-main-content) > - [🗒️ Notes](#️-notes) > - [📚 References](#-references) > - [🗣️ Paraphrase](#️-paraphrase) > - [📰 Newsletter](#-newsletter) > - [✅ Action Items](#-action-items) > - [🧪 Hypotheses](#-hypotheses) > - [📊 Methodology](#-methodology) > - [❓ Questions](#-questions) > - [🔮 Future Research](#-future-research) > - [💡 Implications](#-implications) > - [🧠 Learning Styles Assessment](#-learning-styles-assessment) > - [📊 Accessibility Assessment](#-accessibility-assessment) > - [🌍 DEIB Assessment](#-deib-assessment) > - [✅ Logical Validity](#-logical-validity) > - [🛡️ DARVO Analysis](#-darvo-analysis) > - [🎯 Conclusion](#-conclusion) > ### 🔗 References > - [Suede theme](https://briangardner.com/suede/) > - [Editorial patterns in Suede](https://briangardner.com/editorial-patterns/) > ## 📝 Summary > - Brian Gardner explains the motion system in his Suede WordPress theme: a deliberately small set of subtle transitions rather than a sprawling animation library. > - It matters because it frames motion as a restraint-first design tool that reinforces hierarchy and reading flow instead of demanding attention. > - Key stakeholders: WordPress site builders, theme users, designers who value editorial polish, and readers who benefit from unobtrusive UX. > - Risks and tradeoffs: fewer options limit expressive range; motion currently works in only four core blocks (Group, Columns, Column, Image), so complex layouts may not animate fully. > - Bottom line: good animation is the kind readers barely notice — Suede optimizes for calm reinforcement over spectacle. > ## 📖 Main Content > - The central argument is a design philosophy: the best motion feels natural and reinforces hierarchy rather than competing for attention. Suede embodies this by shipping only two subtle animation effects plus a focused set of controls. > - Context: this is a marketing/philosophy post for a commercial block theme (Suede) by Brian Gardner, a long-time WordPress theme designer (StudioPress/Genesis heritage). "Motion" here means CSS-driven transitions applied through block settings, aligned with WordPress's block editor model. > - Terms defined: "motion style" = one of the two available effects; "settings/controls" = the fine-tuning options for how each animation behaves. Motion is scoped to four core blocks (Group, Columns, Column, Image), with possible future expansion. > - Uncertainties/contested claims: the post is aspirational and unquantified — it never names the two effects, shows no code or demo, and provides no evidence (metrics, user testing) that subtle motion improves reading outcomes. The claim that restraint beats abundance is a design opinion, not a tested result. No mention of `prefers-reduced-motion` handling, which is the key accessibility question for any motion system. > ### 🗒️ Notes > - Thesis stated up front: "The best motion feels natural" — it should reinforce hierarchy, guide the eye, and create a smooth reading experience. > - Positions motion as a design tool on par with typography, spacing, and editorial patterns — a rhythm/relationship device, not decoration. > - Deliberate scarcity: two subtle effects, not a long list. The stated goal is reader focus, not impressing with movement. > - Settings mirror the same restraint — "intentionally simple," enough flexibility to match content rhythm without added complexity. > - Block support is explicit and narrow: Group, Columns, Column, Image. Framed as an evolving system that "may expand." > - Closing aphorism: "The best animation is the kind readers barely notice." > - Notable gap: no reference to reduced-motion preferences, performance cost, or accessibility — a meaningful omission for a motion-focused feature post. > ## 📚 References > - [Suede](https://briangardner.com/suede/) — the theme being described. > - [Editorial patterns](https://briangardner.com/editorial-patterns/) — companion design system Suede's motion works alongside. > ## 🗣️ Paraphrase > - Motion should serve the content, not steal focus; done well, it guides the eye and reinforces structure much like type and spacing do. > - Suede therefore ships only two understated animations and a small, focused set of controls, currently limited to four core blocks, on the principle that the best animation is the kind readers hardly perceive. > ## 📰 Newsletter > - Brian Gardner's latest on Suede is a quiet manifesto: motion should whisper, not shout. His WordPress theme ships just two subtle animations and a lean set of controls — a refreshing counter to the "animate everything" era. > - Worth a look if you build block themes and care about editorial calm. Motion currently rides on Group, Columns, Column, and Image blocks, with room to grow. > - Read it: [Motion in Suede](https://briangardner.com/suede-motion/). Pair it with his [editorial patterns](https://briangardner.com/editorial-patterns/) post for the full design-system picture. > ## ✅ Action Items > #### DevRel > - Developer advocacy: use Suede's restraint model as a talk example on tasteful block-theme motion. > - Education: draft a short workshop on adding `prefers-reduced-motion`-safe transitions to core blocks. > - Developer experience: document the pattern of scoping motion to a small block set (Group/Columns/Column/Image). > - Developer marketing: Not applicable to this source — the post is a single vendor's feature philosophy, no campaign hook. > - Community management: Not applicable to this source — no community program is discussed. > - Internal/external/cross-project: align any motion-token proposal with WordPress block supports. > #### OSPO > - Policy & Governance: Not applicable to this source — no open-source governance content. > - License Compliance: Not applicable to this source — no licensing discussion. > - Security Management: Not applicable to this source — no security surface. > - Software Inventory: Not applicable to this source — no SBOM relevance. > - Developer Support: note motion-accessibility guardrails for any theme review consult. > - Community Engagement: Not applicable to this source — no upstream engagement described. > - Strategic Alignment: Not applicable to this source — no org KPI tie-in. > #### Community > - Maintainers: consider a "motion hygiene" checklist for theme release reviews. > - Contributors: Not applicable to this source — no contributor onboarding content. > - Sponsors: Not applicable to this source — no sponsorship content. > - Ecosystem: Not applicable to this source — no cross-project coordination. > #### WordPress > - Core: evaluate whether a standardized block motion support belongs in core rather than per-theme. > - Core Performance: profile CSS-transition cost of subtle motion at scale. > - Core AI: Not applicable to this source — no AI content. > - **Core Program Team:** Not applicable to this source — no program coordination content. > - Mobile: Not applicable to this source — no mobile app content. > - Playground: build a Playground demo toggling Suede-style motion on/off. > - Community: Not applicable to this source — no meetup/WordCamp content. > - Training: add a lesson on motion restraint and reduced-motion support. > - Marketing: Not applicable to this source — no .org marketing tie-in. > - Support: Not applicable to this source — no support content. > - Design: fold "motion as a design tool alongside type/spacing" into design guidance. > - Documentation: document a reduced-motion-safe transition recipe for block themes. > - Photos: Not applicable to this source — no photo directory relevance. > - TV: Not applicable to this source — no video content. > - Polyglots: Not applicable to this source — no translation content. > - Accessibility: audit any motion feature against WCAG 2.3.3 (Animation from Interactions) and prefers-reduced-motion. > - Meta: Not applicable to this source — no .org infrastructure content. > - CLI: Not applicable to this source — no CLI relevance. > - Hosting: Not applicable to this source — no hosting content. > - Tide: Not applicable to this source — Explore the motion system in Suede, including subtle animation effects and customizable settings that bring WordPress sites to life. #### Motion with purpose The best motion feels natural. Rather than competing for attention, it should reinforce hierarchy, guide the eye, and create a smooth reading experience. That’s the philosophy behind motion in [Suede](https://briangardner.com/suede/). Instead of offering a long list of animation effects, Suede includes a small set of subtle transitions designed to complement your content. The goal isn’t to impress readers with movement—it’s to help them stay focused on what they’re reading. When used with restraint, motion becomes another design tool. Like typography, spacing, and editorial patterns, it helps create rhythm, establish relationships between elements, and make each page feel more polished without ever becoming a distraction. Motion in Suede includes two subtle animation effects designed to enhance the reading experience without distracting from your content. Each serves a different purpose while remaining intentionally subtle. Like the motion styles themselves, the settings are intentionally simple. Rather than overwhelming with endless options, Suede provides the controls users need to create subtle, consistent animation throughout your site. Once you’ve selected a motion style, Suede provides a small set of controls for fine-tuning how each animation behaves. The settings are intentionally focused, giving you enough flexibility to match the rhythm of your content without introducing unnecessary complexity. Motion in Suede is currently supported in four core WordPress blocks: **Group**, **Columns**, **Column**, and **Image**. As the motion system evolves, support may expand to additional blocks. Motion is one of many design decisions that shape the experience of a website. When used with restraint, it reinforces hierarchy, guides attention, and helps content feel more natural to read. In Suede, motion works alongside [editorial patterns](https://briangardner.com/editorial-patterns/), typography, and spacing to create polished WordPress sites without demanding attention. Like every design decision, it exists to support the content—not compete with it. **The best animation is the kind readers barely notice.**, Motion in Suede, briangardner.com, 01kx13deyxxxrtd0njst25m372.