Draggable Dashboard Template 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.
About This Template
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.
What's Included
- 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
Perfect For
- 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.
:root.
Try them in the preview above.