Shuffle: Website Template for Brand Identity Studios
An identity studio shows range, one brand after another. Shuffle stacks your projects as a deck in the hero and lets visitors throw the top card to see the next.
**Signature interaction.** A throwable card deck: the top card follows the pointer and tilts, flies to the back past a threshold or springs home on a short drag, with buttons and arrow keys that deal the same way.
**Features**
- **Card deck.** Drag, flick, press a button or use the arrow keys to deal.
- **Index.** Every project as a row with its card colour, client, scope and year.
- **Method.** Four steps, one open at a time, on native details elements.
- **Services.** A cloud of service pills.
- **Client words.** Two quotes set large.
- **Grid fallback.** With no JavaScript the cards are laid out in a grid.
**What's included**
- A home page and 8 identity case pages, generated from one content file
- Every word, image, link and colour in `content.json`, so no code changes are needed to make it yours
- README and a buyer guide for editing, building and deploying
- The Studio Engine: Vite, TypeScript, smooth scrolling and animation
- Self-hosted open licence (OFL) fonts and generated placeholder images
- QA notes with the test results
**Built right**
- Lighthouse mobile 93 to 99 performance, 100 accessibility, best practices and SEO
- Keyboard accessible, works without JavaScript and respects reduced motion
- About 60 KB of JavaScript gzipped
- Deploys as static files to any host
**Requirements:** Node.js 20 or newer to edit and build.
**Tags:** website template, brand identity, branding studio, logo designer, design agency, portfolio template, Vite, responsive
**Files**
- Product file: `../studio-shuffle.zip`
- Listing cover, 1920x1080: `../covers/studio-shuffle-cover.jpg`
- Feed cover, 1080x1350: `../covers/studio-shuffle-cover-feed.jpg`
- Reel, 10 seconds: `../reels/studio-shuffle-reel.mp4`
