Apple Intelligence Gradient in CSS: The Animated Glow
The conic-gradient and @property recipe behind the Apple Intelligence glow, with a...
Where motion meets interface
Visual design for the modern web and motion graphics, plus a curated styleframes library from working designers.
The term
What is a styleframe?
A styleframe is a single still image that shows what a finished motion piece will look like at one specific moment. It is not a storyboard panel and it is not a mood board. A storyboard sequences the action; a mood board collects references. A styleframe commits: this exact type, these exact colors, this lighting, rendered at final quality on one frame, so a client can approve the look before anyone spends a week animating it.
Most projects need two or three of them, usually pulled from the beats that carry the most visual weight. They live in the same territory as UI design, which is why this site covers both: the same decisions about hierarchy, type and color decide whether a frame reads in two seconds or not at all.
Latest writing
From the desk this month.
Figma Config 2026 Recap: What Matters for Designers
A filtered recap of Figma Config 2026, Motion, Code Layers, Shaders, and...
Admin Panel Layouts: Advanced SaaS Dashboard Patterns
Advanced admin panel UI patterns for data-heavy SaaS tools: dense data tables,...
Motion Work: When Blocking the Main Thread Is Fine
Never block the main thread is not a rule, it is a...
Typography for Dark Mode: Weight and Optical Sizing
Why the same font weight looks different on a dark background, and...
Modern Dashboard Design: 5 Real Examples You Can Open
Five modern dashboards you can open right now without a login: Plausible,...
Free tools
Run the numbers in the browser.
- Color palette generator Four colors on a live UI, WCAG contrast as you go
- WCAG contrast checker Ratio and AA/AAA verdict for any pairing
- Type scale calculator A modular scale you can paste into CSS
- Dashboard grid generator 12-column layouts with the spans already picked
- CSS clamp preview Fluid type between two viewport widths
- Spacing scale generator One ratio, a full spacing token set
- Styleframe brief The questions to ask before the first frame
Topics · 06
Six disciplines, one craft.
Hand-picked guides from production work — not theory.
Motion Design
Web animation, micro-interactions, scroll-driven motion.
UI Design
Layout systems, visual hierarchy, component patterns.
Design Systems
Figma components, tokens, team workflows.
Web Layouts
CSS Grid, Flexbox, dashboards, responsive structures.
Typography
Font pairing, type scales, web font performance.
Tools
Figma, Sketch, Penpot, and the ecosystem around them.
Featured & Recommended By
Recognized as a styleframe and motion graphics reference by 200+ designer portfolios, resource lists, and creative communities worldwide.
About this site
Art of Styleframe is written by working motion and UI designers, not generated from scraped listicles. Every guide comes from production work: real Figma files, real client constraints, real trial and error. We link out to primary sources instead of asking you to take our word for it, and we don't run sponsored posts or paid placement.