Motion & Effects

Five pure-CSS effects — each generated from a natural-language description. Scroll to see the progress bar.

01 — Keyframe Animation

Pulse Circle

A circle that scales 1 → 1.15 → 1 with an opacity fade, infinite loop. Described as: "천천히 커졌다가 원래 크기로 돌아오는 루프, 빛나는 느낌."

infinite 2s ease-in-out
02 — Scroll-Driven Animation

Scroll Progress Bar

The blue bar at the very top of the page tracks your scroll position. Uses animation-timeline: scroll() in supporting browsers, JS fallback otherwise.

/* Chrome/Edge/Firefox — native CSS scroll-driven */
.scroll-progress {
  animation: grow-width linear both;
  animation-timeline: scroll();
}

@keyframes grow-width {
  from { width: 0%; }
  to   { width: 100%; }
}
03 — Clip-path Reveal

Text Reveal

clip-path: inset(0 100% 0 0) → inset(0 0% 0 0) triggered on click. Easing: cubic-bezier(0.16, 1, 0.3, 1) — "Expo Out", starts fast and snaps.

Revealed

04 — Backdrop Filter

Glass Morphism Card

backdrop-filter: blur(16px) blurs what's behind the card. The card itself has rgba(255,255,255,0.2) background — not opaque, so the blur shows through.

UX Engineering

Vibe Coding

Build real interfaces at AI speed. From prompt to production.

05 — Pseudo-element Animation

Shimmer Button

A highlight sweeps across on hover using a ::after pseudo-element with a linear-gradient that animates its left position from -100% to 100%.