Cards & Lists

Three card types built from a single AI prompt. Hover each card to see the lift effect.

GSAP

Scroll Animation Fundamentals

Master ScrollTrigger to create scroll-linked animations, parallax effects, and pinned sections that feel native.

12 lessons Start learning →
Tutorial

How to Prompt Your Way to a Design System

Stop copy-pasting components. Learn how a single well-structured prompt can generate a consistent token-based design system in minutes.

Read more →

Hyunsoo Park

UX Engineer

Skeleton Loading State

Below is a skeleton version of the course card — generated from a single prompt specifying the shimmer animation.

The prompts used

Cards
Create 3 card components:
1. Course card (badge, title, description, lesson count, CTA arrow link)
2. Blog card (date, tag, title, 2-line excerpt, read-more link)
3. Profile card (initials avatar, name, role, 3 social icon links)

All cards: border 1px solid #e5e5e5, border-radius 8px, padding 20-24px.
Hover: translateY(-2px), box-shadow 0 4px 16px rgba(0,0,0,0.07).
Layout: 3-col grid desktop, 1-col mobile.
Skeleton
Add a skeleton loading version of the course card.
Use CSS shimmer: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)
background-size: 200% 100%, animation: shimmer 1.4s infinite.