hyperframes-fx-shimmer-sweep

Shimmer Sweep

When to use

• On the question card's em emphasis word, a one-time sparkle over the stat card's big number
• Layer it over AI/premium/emphasis elements to draw the eye
• 톤: brand, news, emotional
• Usage rules: Once per card — overuse weakens the effect

Install

npx hyperframes add shimmer-sweep

→ compositions/components/shimmer-sweep.html generation.

Wiring (component approach)

components/shimmer-sweep.html Import the CSS and apply the class or snippet to the target element. Based on CSS gradient mask.

<!-- 예: question 카드의 em 강조어에 적용 -->
<div class="q-text">정말 <em class="shimmer-sweep">그것</em>이 답일까?</div>

/* shimmer-sweep 컴포넌트 CSS 포함 */
.shimmer-sweep {
  /* gradient mask animation */
}

Controlling the appearance timing in the GSAP timeline:

tl.fromTo(".shimmer-sweep",
  { "--shimmer-x": "-100%" },
  { "--shimmer-x": "100%", duration: 1.0, ease: "power2.out" },
  s + 1.5);

Parameters

• The sweep color, speed, and width are CSS custom properties

짝

• Good fit: grain-overlay, light-leak (cinematic feel)
• Avoid: do not apply simultaneously to multiple elements on one card