# Draggable Dashboard Template

> A calm project-dashboard landing page with draggable, keyboard-reorderable widgets, a practical build-your-workspace section, expandable release rooms and split-flap metrics.

Canonical: https://gsapvault.com/templates/bento-grid-template
Live demo: https://gsapvault.com/demos/bento-grid-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger, Flip, Draggable |
| Techniques | draggable, keyboard-reorder, flip-layout, click-toggle, split-flap, bento-grid, scroll-reveal, stagger |
| Uses Lenis | Yes |

## Overview

A complete landing page for Daymark, a fictional project-dashboard product that keeps budgets, releases, people and handover in one configurable room. Its restrained stone, navy and muted status palette makes the bento structure feel like operational software rather than a collection of decorative cards.

The hero acts as a live dashboard: drag a handle to reprioritise its blocks and Flip settles the full grid without allowing the section height to collapse. Farther down, a dedicated project-room builder makes the same interaction useful with budget, launch, team, release-check, velocity and note widgets, plus working checklist controls and a reset action. Every move has an arrow-key equivalent and polite screen-reader announcement.

Expandable release rooms, split-flap portfolio metrics and guarded scroll reveals complete the page. Four complete brand directions ship in the stylesheet, changing the hero composition, widget hierarchy, navigation, statement layout, typography, shape, spacing and depth as well as colour. A buyer can rename widgets, choose or edit a direction and adjust tile spans without changing the interaction code.

## Features

- Complete deployable dashboard-product site: nav, draggable hero, portfolio metrics, project-room builder, product detail grid, statement, conversion section and footer
- Signature draggable hero board: grab a dotted handle to physically reorder blocks, with collision feedback, a lifted drag state and a Flip-powered settle
- Keyboard-equivalent board controls: focus any handle and use arrow keys to reorder, with screen-reader announcements
- Flip tile expansion: a tile morphs into a full-width panel while its neighbours reflow, with the grid height held so the page never jumps
- Split-flap stat board built from the figures in the markup, so the page states the right number with no JavaScript and a screen reader hears the value rather than a stream of rolling characters
- Two bento clusters with deliberately different rhythms: a 2x2 cover and tall tiles up top, more and smaller tiles below with one running the full width
- Four art plates drawn as inline SVG, a risograph overprint, a halftone field, a plotted line chart and a duotone monogram, so there is nothing to source
- Tile spans are set by class, so adding, removing or rearranging tiles is a CSS edit rather than a markup rewrite
- Four complete brand directions: restrained Daymark, square Ledger, dark technical Signal and serif Editorial
- Brand switching changes hero composition, widget hierarchy, navigation, statement layout, typography, radius, spacing, borders and depth—not only colour
- Every translucent value resolves from the active direction's RGB triples, preventing mixed-brand remnants
- Lenis smooth scrolling wired in and fully optional
- Accessible: real buttons with aria-expanded, focus moved into the panel and returned on close, Escape to close, AA contrast on both surfaces, and a complete page with JavaScript off

## Use Cases

- Project-management and operations SaaS products demonstrating configurable dashboards
- Client portals where teams need budgets, milestones, people and release checks in one view
- Analytics products that let customers prioritise and rearrange widgets
- Internal tools needing an approachable marketing site with a credible driven UI
- Portfolio-management software presenting live status without a dark enterprise-dashboard aesthetic
- Learning how to drive a Flip layout change while holding container height through the absolute phase

## How It Works

### Structure

One script initialises each section inside a single gsap.context with gsap.matchMedia, and every lookup is guarded so a section that is not there is skipped silently. Tiles are placed by span rather than by fixed grid lines, which is what lets the rest of the grid genuinely re-place itself when one tile takes the full row. Delete any section, or any tile, and the rest keeps working.

### The draggable boards

GSAP Draggable is attached only to generated handles, so links, checklist controls and selectable copy keep their native behaviour. During a drag, hitTest marks the widget beneath the lifted tile; release moves the real DOM node and Flip.from settles every block into the new grid order. Both the hero and project-room builder lock and tween their min-height through Flip's absolute phase, so the section below can never slide underneath. Focused handles mirror the interaction with arrow keys and announce each move through an aria-live region.

### The tile expansion

A toggle inside the tile flips a class that changes the tile's grid area to the full row, then Flip.from animates that layout change for the tile and every sibling that moved. absolute: true is what lets a tile travel across rows, and it is also the hazard: it lifts the animating tiles out of the grid's normal flow, so the grid's height would collapse mid-tween and everything below would jump. The script locks the grid's min-height to its pre-tween height and tweens that to the post-layout height over the same duration, then hands the box back to normal layout. The detail content is staggered in only after the morph lands, because text reflowing inside a box that is still changing width reads as a wobble.

### The stat board

Each figure ships in the markup as plain text. The script splits it into per-character cells, marks the cells aria-hidden, and makes the authored figure visually hidden so it stays the accessible value. Each cell then rolls backwards through a glyph wheel to its own character, cascading left to right, and lands with a back-eased overshoot. The total number of animated cells is capped so a longer board cannot turn into a per-frame text-writing problem.

### Accessibility and reduced motion

Every toggle is a real button with aria-expanded, so Enter and Space work for free; opening moves focus into the panel and closing returns it to the trigger, and Escape closes from anywhere. On a coarse pointer the toggle stretches over the whole tile so a tap anywhere opens it. Reduced motion gets the same layout with no tweens: tiles still open and close, because that is function rather than decoration, and the stat board simply shows its figures.

### Without JavaScript

Every detail panel is just the next part of its tile, and every stat is plain text, so the page reads as one complete document. The JavaScript-gating class is added synchronously in the head, before first paint, and the script removes it again if GSAP did not load, which means a blocked CDN degrades to that same complete document rather than to a page of empty tiles.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

1. Open `index.html` and replace Daymark with your product: the brand, hero dashboard, project-room widgets, metrics, product details and conversion copy.
2. Change the core colours and optional spot colours at the top of `assets/style.css`. Keep the RGB triples in step. See [Brand directions](#brand-directions).
3. Rearrange the grid by changing tile spans in `style.css` (search for `Board tile spans`). Tiles are placed by span, not by fixed grid lines, so there is no markup to rewrite. See [The grid](#the-grid).
4. Update the `<title>` and `<meta name="description">`, and remove `<meta name="robots" content="noindex, nofollow">` when you go live.
5. Swap the fonts if you want to: change the Google Fonts `<link>` in `index.html` and the three `--font-*` tokens in `style.css`.
6. Deploy the folder anywhere that serves static files.

#### Optional: minify before you go live

`assets/script.js` is the readable source and is what `index.html` loads. It is around 43KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:

```bash
bunx terser assets/script.js -c -m -o assets/script.min.js
```

Then point the last `<script>` tag in `index.html` at `assets/script.min.js`. Keep `script.js` as the file you edit and re-run the command after each change, otherwise the two quietly drift apart.

### Accessibility

- Every toggle is a real `<button>` with `aria-expanded` and `aria-controls`, so Enter and Space work without any key handling. Opening moves focus into the panel; closing returns it to the trigger it came from. Escape closes from anywhere on the page.
- On a coarse pointer the toggle stretches over the whole tile, so a tap anywhere opens it. On a fine pointer it stays a corner control, so the tile's copy remains selectable.
- The flap cells are `aria-hidden` and the authored figure stays in the DOM as a visually hidden element, so a screen reader gets the value and its label, never a stream of rolling characters.
- `prefers-reduced-motion` gets the same layout with no tweens, via both a CSS block and a `gsap.matchMedia` branch. Tiles still open and close, because that is function rather than decoration; they just switch instantly. The replay button on the stat board is hidden, since there is nothing for it to replay, and the figures are already correct.
- **Without JavaScript** every detail panel is simply the next part of its tile and every figure is plain text, so the page reads as one complete document with nothing behind a control that cannot work.
- The `has-js` class that hides reveal targets is added in the `<head>` before first paint and removed again by the script if GSAP did not load, so a blocked CDN degrades to that same complete document.
- Focus is always visible: a solid amber ring, which clears 3:1 on both surfaces.

### Dependencies

- GSAP 3.14.2 (core)
- ScrollTrigger
- Flip
- Draggable
- Lenis 1.3.17 (optional)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Draggable Dashboard Template](https://gsapvault.com/templates/bento-grid-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt