Portfolio Essentials

Show the work, then let it speak.

A portfolio is a sequence of first impressions. These components handle the moments that matter: an opening statement with presence, project cards that reward curiosity, a detail view that keeps context, process shown as before and after, and navigation that feels like an instrument rather than a menu.

C.09
viewportstaggerzero deps
Kinetic Headline
Display type that rises out of masks line by line, word by word or character by character.
Typography & Text · React / CSS / Tailwind
B.05
pointerhoverspringmotion
Tilt Card
A perspective card that tilts toward the pointer, with a spring-smoothed glare and layered depth.
Cards & Containers · React / Motion / Tailwind
B.08
clickkeyboardlayoutmotion
Expandable Project Card
A portfolio card that expands into a full project dialog through a shared-layout animation.
Cards & Containers · React / Motion / Tailwind
D.13
pointerhoverspringmotion
Interactive Dock
A navigation dock whose tiles rise and grow as the pointer approaches.
Navigation & Menus · React / Motion / Tailwind
B.37
viewporthoverstaggermotion
Bento Grid
A responsive editorial bento layout with dense packing, a staggered entrance and pointer-lit tiles.
Cards & Containers · React / Motion / CSS / Tailwind
B.40
dragpointerspringmotion
Compare Slider
A before / after comparison with a draggable, keyboard-operable divider revealed by clip-path.
Cards & Containers · React / Motion / CSS / Tailwind
H.61
dragpointerspringmotion
Ring Carousel
A 3D ring of cards you can drag, flick and snap, with keyboard control and a flat reduced-motion fallback.
3D & Experimental · React / Motion / CSS / Tailwind
C.43
hoverfocuscontinuouszero deps
Circular Text
A rotating ring of type around a centre slot — the classic “available for work” badge.
Typography & Text · React / SVG / Tailwind
B.67
clickkeyboardtweenzero deps
Zoom Image
Click an image to zoom it from its exact on-page position to fit the viewport, in a native modal dialog.
Cards & Containers · React / CSS / Tailwind
B.68
scrollscroll-linkedmotion
Scroll Stack
Cards that pin and pile up as you scroll, with covered cards easing back in scale and light.
Cards & Containers · React / Motion / CSS / Tailwind
C.72
pointercontinuouszero deps
Masked Text
Display type used as a window onto a moving texture — gradient, grain, stripes or your image.
Typography & Text · React / CSS / Tailwind
D.75
clickkeyboardtweenmotion
Overlay Menu
A fullscreen navigation overlay that grows from its hamburger button, with large links rising through masks.
Navigation & Menus · React / Motion / CSS / Tailwind
B.97
hoverpointerspringmotion
Hover Image List
An editorial index list whose rows reveal a floating image that follows the pointer, tilts with velocity and crossfades.
Cards & Containers · React / Motion / Tailwind
H.122
scrollclickscroll-linkedmotion
Depth Gallery
Cards on a loose spiral at increasing depth that fly toward the viewer as you scroll — a perspective tunnel.
3D & Experimental · React / Motion / CSS / Tailwind
C.102
viewporttweenzero deps
Fit Text
A headline that sizes itself to exactly fill its container's width — per line, with any font, without a first-paint jump.
Typography & Text · React / CSS / Tailwind
B.130
clickviewportspringmotion
Masonry Grid
A measured masonry layout with responsive column breakpoints that springs tiles into place as they are added, removed or resized.
Cards & Containers · React / Motion / Tailwind
H.152
dragpointerspringmotion
Coverflow
The classic coverflow: a forward-facing centre cover with the rest turned away in depth, on one spring.
3D & Experimental · React / Motion / CSS / Tailwind
C.131
hoverfocustweenzero deps
Animated Link
Inline links with refined hover and focus underlines — slide, grow, double, highlight, arrow and wave — that follow line wraps.
Typography & Text · React / CSS / SVG / Tailwind
H.151
dragpointertweenmotion
Page Flip
A CSS 3D book: drag a page's edge and it turns around the spine with curl shading, or falls back.
3D & Experimental · React / Motion / CSS / Tailwind
H.181
pointerhoverspringmotion
Holo Card
A holographic foil card that tilts toward the pointer while rainbow foil, glitter and glare shift with the light.
3D & Experimental · React / Motion / CSS / Tailwind
H.182
pointerhoverspringmotion
Extruded Text
Display text with real 3D depth from stacked, shaded layers that turns toward the pointer on a spring.
3D & Experimental · React / Motion / CSS / Tailwind
B.157
scrolldragscroll-linkedzero deps
Snap Carousel
An accessible carousel on native CSS scroll-snap with peeking slides, dot or thumbnail pickers and pausable autoplay.
Cards & Containers · React / CSS / Tailwind
E.169
pointerhovertweenzero deps
Halftone Image
Any image re-printed as a rotated halftone screen of dots, squares or lines, with a pointer lens that reveals the original.
Backgrounds & Effects · React / Canvas / Tailwind
B.190
clickdragtweenzero deps
Lightbox Gallery
A thumbnail grid that opens a full-screen <dialog> lightbox: FLIP from the thumbnail, swipe, pinch / double-click zoom and a thumbnail strip.
Cards & Containers · React / CSS / Tailwind
C.191
hoverpointerspringmotion
Text Image Reveal
Editorial text where marked words reveal an image: an inline pill that pushes the line apart, or a floating print that follows the pointer.
Typography & Text · React / Motion / Tailwind
H.212
clickkeyboardspringmotion
Door Reveal
Doors that swing open in CSS 3D around their hinges, with shading and a slight overshoot, to reveal the content behind.
3D & Experimental · React / Motion / CSS / Tailwind
D.197
clickkeyboardtweenmotion
Page Transition
A route transition wrapper using the View Transitions API with a Motion fallback, direction-aware presets and SPA focus management.
Navigation & Menus · React / Motion / CSS

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactCSSTailwindMotionSVGCanvas

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionMotion Fundamentals