Kategori 01

PENGURUSAN SKROL

Fokus: Bagaimana pelawat bergerak dalam web.

  • • Smooth Scrolling: Tatalan lembut (Lenis/Locomotive).
  • • Horizontal Scrolling: Gerakan mendatar dalam skrol menegak.
  • • Sticky / Pinning: Elemen melekat di skrin.
  • • Section Scrubbing: Animasi ikut kelajuan skrol.
  • • CSS Scroll-driven: Animasi skrol tanpa JS.
  • • Snap Scrolling: Melekat pada seksyen (seperti web ini!).
SCROLL DOWN
STICKY DEMO
SCROLL DOWN
Kategori 02

Animasi Kandungan

  • • Text Reveal & Masking: Teks muncul dari "celah".
  • • Staggered Animation: Elemen muncul berperingkat.
  • • Text Filling: Warna teks mengalir masuk.
  • • Parallax Effect: Ilusi 3D lapisan visual.
  • • Image Scaling: Zum dinamik ikut interaksi.
  • • View Transitions API: Transisi antara muka yang halus.

REVEAL
REVEAL

Kesan: Text Filling & Masking

Kategori 03

Interaksi Mikro

MAGNETIC
  • • Custom Cursor & Follower: Penunjuk tetikus tersuai.
  • • Magnetic Interaction: Butang menarik kursor.
  • • Morphing: Pertukaran bentuk elemen (A ke B).
  • • Hover States: Maklum balas visual tetikus.
  • • Auto-Animate: Animasi susun atur automatik.

04. Grafik Tinggi & 3D

SVG & Lottie
Three.js / WebGL
Spline / Rive

• WebGPU (Next Gen)

• Vector Animations

• JSON Animations

• 3D Scene Integration

05. GAYA VISUAL

Glassmorphism

Efek kaca kabur menggunakan backdrop-filter.

Bento Box 1
Bento Box 2
Bento Grid Layout
#Neumorphism #MeshGradients #Minimalism

06. PUSTAKA & TECH

GSAP ScrollTrigger AOS Locomotive Framer Motion Three.js Lenis Magic UI Shadcn/ui Theatre.js

Dibina khas untuk Edy - Projek WEB AI EXPRESS 2026