Kinetic Portfolio (concept)
Concept · 2026 · 2026
A designer portfolio built on cursor-reactive moments: an image trail across the hero, decoding nav labels, an editorial project index that reveals artwork on hover and a shared-element Flip into each case study.
Effects that recreate this look
- 01
Featured medium Cursor intermediateImage Trail Following Cursor
Moving the pointer across a dark stage leaves a trail of grainy gradient tiles: every 40px of travel a new tile blooms under the cursor with a slight twist, hangs for 0.6s and dissolves, stacking above the last.
- gsap
- canvas2d
- 02
Featured light Text beginnerScramble / Decode Text
A mono headline and five nav-style rows decode from random glyphs (A–Z, 0–9, #@%&!) into real words on load and re-scramble on hover, while a status line decodes a new word every three seconds.
- gsap
- 03
light Hover intermediateHover Image Reveal on List Items
An editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.
- gsap
- 04
light Page Transitions advancedShared-Element Flip Transition
Clicking one of six thumbnails records its position with Flip.getState, reparents it into a full-screen detail layout and morphs it there in 0.9s power3.inOut while the other tiles scale away; Close or Escape morphs it back.
- gsap
- flip
- 05
light Text intermediateInfinite Marquee with Scroll Speed
Two bands of huge serif words, one filled and one outlined, loop endlessly in opposite directions; scroll velocity speeds them up and flips them, hovering a band eases it to a stop.
- gsap
- scrolltrigger
- 06
light Hover intermediate3D Tilt Card with Glare
Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.
- gsap