Skip to content

[NO-ISSUE] feat(webkit): premium linear shimmer for Skeleton#686

Open
gab-az wants to merge 2 commits into
devfrom
feat/skeleton-shimmer-animation
Open

[NO-ISSUE] feat(webkit): premium linear shimmer for Skeleton#686
gab-az wants to merge 2 commits into
devfrom
feat/skeleton-shimmer-animation

Conversation

@gab-az

@gab-az gab-az commented Jun 26, 2026

Copy link
Copy Markdown
Collaborator

Summary

Replace the Skeleton placeholder's opacity pulse with a premium linear shimmer — a gradient highlight band that sweeps diagonally across the fill.

  • theme: add a shimmer preset to the animate token object (--animate-shimmer: shimmer 1.6s linear infinite) and the matching @keyframes shimmer (background-position sweep) to semantic/animations.js. Rebuilt dist/v3 so the variable lands in globals.css/globals.scss.
  • webkit: Skeleton now renders a linear-gradient(45deg, ...) band between --bg-surface-raised and --bg-surface, sized 200% 100% and driven by animate-[var(--animate-shimmer)]. The whole effect is gated behind data-[animated]:motion-safe: (flat fill under reduced motion) plus an explicit motion-reduce:animate-none.
  • Spec .specs/skeleton.md updated to match (Motion table, Theme gaps, JSDoc) with a recomputed checksum.

Notes

  • No new dependencies. CSS + tokens only.
  • No public API change (no prop/event/slot/export added or removed) — bump is minor from the new feat commits.
  • --animate-shimmer still has a TODO to be documented in DESIGN.md § Animations

@gab-az gab-az requested a review from a team as a code owner June 26, 2026 19:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant