Doc folder

A folder whose papers peek out under the pointer and fan out above it when it opens; each paper is a link you can pick.

enhancer
folder
files
disclosure
hover
cards
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Doc folder example

Launch plan Brand guide Moodboard

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div data-motion="doc-folder" aria-label="Project files">
  <a href="#">Launch plan</a>
  <a href="#">Brand guide</a>
  <a href="#">Moodboard</a>
</div>

import { DocFolder } from "./motion/react/DocFolder";

<DocFolder>Your content</DocFolder>

<script setup lang="ts">
import DocFolder from "./motion/vue/DocFolder.vue";
</script>

<template>
  <DocFolder>Your content</DocFolder>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "doc-folder";

The wrappers: DocFolder.tsx (React, TypeScript) and DocFolder.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-size`	`200`	the folder's width
`data-motion-color`	auto	the folder's color (empty: the accent)
`data-motion-label`	`Folder`	the button's name when the element has no aria-label

- The folder is a button with the element's label, aria-expanded and aria-controls; the papers are the page's own links (or buttons) in a list. - Closed, the papers are inert: they only peek out. Open, Tab reaches each one; Escape or a click outside closes the folder and Escape puts focus back on it. - The folder keeps room above it for the open fan, so opening it never moves the page. - Reduced motion opens and closes it at once. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

doc-folder.js is 1.7 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.