Stacked Cards

micro interaction animation interaction navigation

Stacked Cards là cách trình bày một tập hợp items mà không cần hiển thị tất cả cùng lúc. Active card chiếm toàn bộ diện tích, trong khi các ghost card peek ra phía trên và phía dưới — scale nhỏ hơn, tạo chiều sâu và gợi ý rằng vẫn còn nội dung tiếp theo.

Pattern này phù hợp khi bạn có nhiều items cần duyệt tuần tự và muốn người dùng tập trung vào từng item một, thay vì bị overwhelmed bởi cả danh sách.

Prototype

Click card hoặc scroll bên trong khung để cycle qua các item.

Interaction Design

I design flows that are as fast to use as they are easy to trust — every tap, every state, intentional.

Every state, intentional

Design Strategy

I turn ambiguous problems into clear design directions — no fluff, just structured thinking.

Clarity from chaos

0→1 Product Design

I love the 0→1 phase — messy, uncertain, full of potential. Finding signal fast, shipping something worth using.

From blank canvas to first users

Prototyping

I prototype at the speed of thought — from lo-fi flows to high-fidelity demos that feel real enough to test.

Ideas you can touch

Design Systems

I build and document design systems that teams actually use — tokens, components, and the rules behind the rules.

Rules behind the rules

Cách hoạt động

Mỗi card được định vị trong một “deck”:

  • Active card (index 0): full size, z-index cao nhất, opacity 1
  • Ghost +1 / -1: scale ~0.73, peek 40px từ cạnh active card
  • Ghost +2 / -2: scale ~0.5, peek 70px — mờ hơn, tạo hiệu ứng perspective

Khi người dùng chuyển sang item tiếp theo, toàn bộ deck re-index: card mới trở thành active, các ghost dịch chuyển theo.

Kết hợp với arc navigation

Trên trang About, Stacked Cards hoạt động song song với một arc menu xoay bên trái. Arc menu cho phép scroll/drag để chọn skill category, Stacked Cards phản chiếu selection bằng cách hoán đổi card nội dung tương ứng.

Hai component giao tiếp qua một shared activeIndex — khi arc thay đổi, cards animate; khi cards được swipe, arc tự động xoay theo.

Khi nào nên dùng

  • Danh sách dài (10+ items) mà mỗi item có nội dung riêng đáng đọc
  • Muốn người dùng browse tuần tự, không skip ngẫu nhiên
  • Context cần cảm giác “tangible” — như lật qua từng trang trong một cuốn sổ

Khi nào không nên dùng

  • Items cần so sánh trực tiếp với nhau → dùng grid hoặc table
  • Người dùng cần tìm kiếm item cụ thể → dùng list có filter
  • Số lượng items < 4 → stacking tạo false expectation về độ sâu

20 tháng 5, 2026