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
>
<!-- deep-read:sections start -->
## 🧭 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 — no scoring relevance.
- Openverse: Not applicable to this source — no media-library relevance.
- Themes: use this as a reference model for reviewing motion in submitted themes.
- Plugins: Not applicable to this source — no plugin content.
#### The WPCC
- Programs: Not applicable to this source — no funding/program content.
- Projects: Not applicable to this source — no project-governance content.
- Funding experiments: Not applicable to this source — no funding content.
### FAIR
- Technical independence: Not applicable to this source — no metadata/provenance content.
- Policies and covenants: Not applicable to this source — no governance content.
- Productized governance artifacts: Not applicable to this source — no charter/scorecard content.
## 🧪 Hypotheses
- Subtle, restrained motion improves perceived reading flow more than abundant animation for content-heavy WordPress sites.
- Limiting motion to two effects reduces user configuration errors versus a large effect library.
- Scoping motion to four structural blocks (Group/Columns/Column/Image) covers the majority of real-world layout animation needs.
- Sites using Suede-style motion will show no measurable increase in bounce rate versus a no-motion baseline.
- Adding explicit `prefers-reduced-motion` support would meaningfully reduce accessibility complaints for motion-enabled themes.
### 📊 Methodology
- A/B test reading-completion and scroll-depth on identical content with subtle motion vs. no motion vs. heavy motion.
- Usability study measuring time-to-configure and error rate across a 2-effect system vs. a 10+ effect system.
- Layout audit sampling top block-theme sites to measure what share of animated elements are Group/Columns/Column/Image.
- Analytics diff (bounce, dwell) pre/post motion enablement on a matched cohort of Suede sites.
- Accessibility test harness checking whether animations respect the reduced-motion media query.
### ❓ Questions
- What are the two motion effects, and how do they differ mechanically?
- Does Suede honor `prefers-reduced-motion`, and how is that surfaced in settings?
- What is the performance/CLS impact of the transitions on first paint?
- Why only four blocks, and what blocks come next?
- Are the controls exposed per-block or globally?
### 🔮 Future Research
- Whether a portable block-motion standard (theme-agnostic) could emerge from patterns like Suede's.
- Empirical link between motion restraint and comprehension/retention.
- Motion-token systems that travel across themes the way color/spacing tokens do.
### 💡 Implications
- Practice: encourages theme authors to ship fewer, better-considered motion options.
- Policy: strengthens the case for reduced-motion defaults in theme review guidelines.
- Security: none material.
- Education: a clean teaching example for "restraint as a feature."
- Funding models: none material — commercial theme context only.
### 🧠 Learning Styles Assessment
- Reading level estimate: Flesch-Kincaid Grade ~9–10 (moderately accessible prose, some abstract design vocabulary).
#### 👀 Visual learners
- Present: none — the post has no diagrams, screenshots, or demos in the captured text.
- Improve: add before/after GIFs, a motion-settings screenshot, and a live demo toggle.
#### 🔊 Aural learners
- Present: none.
- Improve: a 2-minute audio walkthrough or narrated demo of each effect.
#### 🗣️ Verbal learners
- Present: clear definitions and analogies (motion "like typography, spacing").
- Improve: a short glossary defining "motion style" vs. "controls."
#### 🧩 Kinesthetic learners
- Present: none — no hands-on steps.
- Improve: a step-by-step "enable motion on a Group block" tutorial.
#### 🧠 Logical learners
- Present: implicit cause→effect (restraint → focus).
- Improve: a decision table for which effect suits which content.
#### 🧑🤝🧑 Social learners
- Present: none.
- Improve: a comments prompt or community showcase of Suede motion in use.
#### 🧘♀️ Solitary learners
- Present: reflective, opinion-driven tone suits self-paced reading.
- Improve: a self-check "is my motion distracting?" reflection prompt.
#### 🌿 Naturalistic learners
- Present: none.
- Improve: tie subtle motion to performance/energy efficiency (lighter animation, less repaint).
### 📊 Accessibility Assessment
#### Screen reader semantics
- Present: unknown from the marketing text; article itself uses headings.
- Improve: ensure animated blocks expose no motion-only meaning to assistive tech.
#### Keyboard navigation
- Present: not addressed.
- Improve: confirm transitions never trap or delay focus movement.
#### Contrast and readability
- Present: not addressed in-post.
- Improve: verify motion doesn't reduce text legibility mid-transition.
#### Text resizing and reflow
- Present: not addressed.
- Improve: test motion at 200% zoom and with reflow.
#### Media and captions
- Present: Not applicable to this source — no media/captions in the post.
- Improve: if demo videos are added, caption them.
#### Forms and interactions
- Present: Not applicable to this source — no forms in the post.
- Improve: n/a until interactive demos exist.
#### Standards reference
- Map gaps to WCAG 2.2 AA: 2.3.3 Animation from Interactions and the `prefers-reduced-motion` expectation are the key unaddressed criteria.
### 🌍 DEIB Assessment
#### Cultural breadth
- Present: none — generic design framing, no regional examples.
- Improve: show motion working across RTL layouts and non-Latin typography.
#### Inclusive language
- Present: plain, neutral language throughout.
- Improve: define "motion" for readers new to web animation.
#### Neurodiversity support
- Present: the restraint philosophy inherently helps motion-sensitive users.
- Improve: explicitly document reduced-motion support — critical for vestibular disorders.
#### Representation
- Not applicable to this source — no people/imagery represented in the text.
- Improve: n/a.
#### Psychological safety
- Present: respectful, non-controversial framing.
- Improve: none needed.
### ✅ Logical Validity
#### Strong reasoning
- Analogical: comparing motion to typography and spacing (a design tool among peers) is a strong, clarifying analogy — it locates motion within an established mental model.
- Causal (implicit): restraint → reader focus is a reasonable causal claim, stated near "the goal isn't to impress readers with movement—it's to help them stay focused."
#### Fallacies
- Appeal to nature / assertion: "The best motion feels natural" and "The best animation is the kind readers barely notice" are asserted, not demonstrated — bare-assertion weakness. Fix: cite user testing or examples.
- False dilemma (mild): framing the choice as "small set of subtle transitions" vs. "a long list of animation effects" implies only two options; a rich-but-tasteful middle exists. Fix: acknowledge the spectrum.
#### Tone of voice
- Calm, confident, editorial-marketing tone; persuasive by philosophy rather than data (e.g., "When used with restraint, motion becomes another design tool").
### 🛡️ DARVO Analysis
- Deny: Not applicable to this source — no accusation is being answered.
- Attack: Not applicable to this source — no adversary or accuser present.
- Reverse victim/offender: Not applicable to this source — no victim/offender framing.
- Emotional cues/rhetoric: gentle persuasion and aphorism, but no DARVO pattern; this is a benign product-philosophy post.
## 🎯 Conclusion
- Bottom line: Suede treats motion as a restraint-first design tool — two subtle effects, simple controls, four supported blocks — on the belief that the best animation goes almost unnoticed.
- Next steps for readers: if building block themes, adopt the "fewer, quieter" motion approach, but close the post's biggest gap by explicitly supporting `prefers-reduced-motion` and testing performance/CLS before shipping.
## 🔄 Refactor Appendix — Motion in Suede
> Density: 2–5 Literature atoms (H3), 0–3 Permanent candidates (H4).
> Defaults: 3 Literature, 1 Permanent. Resonance filter: if you can't
> articulate in one line why a claim matters, drop it.
### 📚 Literature Atoms (H3)
#### [H1] Good motion reinforces hierarchy instead of grabbing attention
> [!quote] ID:rw_h1
> The best motion feels natural. Rather than competing for attention, it should reinforce hierarchy, guide the eye, and create a smooth reading experience.
**Context & use**:
- Opening thesis of "Motion with purpose" section.
- Frames the whole feature; useful as a design principle citation.
**Tags**: #xref #aphorisms
**Highlight**: [view highlight](readwise://)
<!-- atomicity: 1 idea ✓ -->
#### [H2] Motion is a design tool alongside typography and spacing
> [!quote] ID:rw_h2
> 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.
**Context & use**:
- Positions motion within an existing design-system vocabulary.
- Strong analogy for teaching restrained animation.
**Tags**: #xref
**Highlight**: [view highlight](readwise://)
<!-- atomicity: 1 idea ✓ -->
#### [H3] Best animation is barely noticed by readers
> [!quote] ID:rw_h3
> The best animation is the kind readers barely notice.
**Context & use**:
- Closing aphorism; the memorable takeaway of the piece.
- Reusable one-liner for motion-design guidance.
**Tags**: #xref #aphorisms
**Highlight**: [view highlight](readwise://)
<!-- atomicity: 1 idea ✓ -->
### 🧠 Permanent Candidates (H4)
#### [P1] Restraint is a feature in interface motion
**Claim** (one sentence, Courtney's voice): Interface motion earns its place by reinforcing content hierarchy quietly, so fewer well-chosen transitions beat a large effect library.
**Evidence pointer**: [[#H1]]
**Scope & conditions**: Holds for content-first, editorial layouts; breaks when motion itself is the product (games, showcases, brand splash pages).
**Links**:
- [[Design tokens]] — because extends motion into the same system as type and spacing
- [[prefers-reduced-motion]] — because applies-in accessible motion delivery
- [[Editorial patterns]] — because evidence-for a restraint-first design language
<!-- atomicity: 1 idea ✓ -->
### ✏️ Fleeting Queue
- [F1] Which two motion effects does Suede ship, and do they respect prefers-reduced-motion? — https://briangardner.com/suede-motion/ #fleeting #inbox
- [F2] Could block motion become a portable, theme-agnostic token system? #fleeting #inbox
### → Things 3 (max 2 actions)
- [ ] Draft a reduced-motion-safe block-transition recipe for block themes — #things
- [ ] Add "motion restraint" example to design-review notes — #things
<!-- deep-read:sections end -->
📄 **Full text:** [[Full Document Contents/Articles/Motion in Suede.md|Motion in Suede by briangardner.com]]
## Highlights
- The best motion feels natural. Rather than competing for attention, it should reinforce hierarchy, guide the eye, and create a smooth reading experience. ([View Highlight](https://read.readwise.io/read/01kx43etf0a8vnebnnq7n081yd))
- Note: Core thesis: motion reinforces hierarchy, not attention-grabbing.
- Tags: atom/literature/h1
- 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. ([View Highlight](https://read.readwise.io/read/01kx43eyk8bx1echymm1560gb8))
- Note: Motion framed as a design tool peer to type and spacing.
- Tags: atom/literature/h2
- The best animation is the kind readers barely notice. ([View Highlight](https://read.readwise.io/read/01kx43f68paz7fe2jkc3nqf5f7))
- Note: Closing aphorism — the memorable takeaway.
- Tags: atom/literature/h3