GSAP Infinite Tile Frame Portfolio Archive
Overview
Every project on one screen: a frame of square tiles cut from your project images, set round the word "Archive" in red dots. Scrolling turns the frame's four strips like the blades of a pinwheel, endlessly both ways, and the cursor scatters the dots.
The frame is seven tiles across on wide screens (five on smaller ones) and four down, cut into four strips that each own the corner they travel toward. The wheel, a trackpad, a drag or swipe and the arrow keys turn all four together: the top strip runs left, the left one down, the bottom one right and the right one up. The frame glides and settles wherever it stops, and loops forever in both directions.
Details
- Category
- Gallery
- Interaction
- On Scroll + Drag + Mouse Move + On Hover + On Load
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 20 componentsBuilt with the same techniques
No. 013 / Gallery
GSAP CSS 3D Infinite Card Deck Portfolio
On Scroll · Drag · On Hover · On Load
No. 017 / Gallery
GSAP Scroll Unfolding Card Wheel Portfolio
On Scroll · On Hover · On Click · Mouse Move · On Load
No. 015 / Gallery
GSAP CSS 3D Folio Card Fan Portfolio
On Scroll · Drag · On Hover · Mouse Move
(02)FAQ
GSAP Infinite Tile Frame Portfolio Archive — FAQ
01What do I need to install?
npm install gsap @gsap/react. There's no WebGL: the tiles are plain HTML and the dotted title is a 2D canvas. It's built for Next.js with Tailwind CSS v4 and uses next/image for the tiles.
02How do I add my own projects?
Pass a projects array: title, category, year and image. Images of one shared ratio (16:10 works well, set in config.ts) look best. Add crops to choose which squares are cut from each image; a type crop adds a headline tile.
03Can I put other sections above or below it?
Give it a page of its own. The page doesn't scroll: the wheel, swipes and arrow keys turn the frame instead.
04Which fonts does it use?
The dotted title, labels and notes are set in Unbounded: load it with next/font as the --font-unbounded variable on an element around the archive. Without it they fall back to the system sans.
05How do I tune the motion?
Every value is in config.ts: how far a wheel notch moves the frame and how it settles, the flick's carry, the frame's columns and tile size, the word and its dot grid, the cursor's push and the springs, the intro, the colours and the notes.