Folder Open Reveal

Use Folder Open Reveal when the folder metaphor clarifies grouping; use Accordion Expand for ordinary disclosure.

Use

Revealing grouped nested content through a familiar storage metaphor.

Avoid

Avoid it when the content is not actually grouped or when the metaphor would slow comprehension.

Safer Alternative

Accordion Expand

Risk Level

High attention

Timing

250-450ms for flap and content reveal together.

Easing

Use ease-out with a slight 3D rotation for the flap; avoid elastic wobble.

Risk

overdesignedaccessibility sensitive

Live Demo

Project brief

What It Is

A folder-like container opens to reveal nested content, using a familiar file metaphor to communicate grouping and disclosure.

Decision Guidance

Use Folder Open Reveal when the folder metaphor clarifies grouping; use Accordion Expand for ordinary disclosure.

Best For

Revealing grouped nested content through a familiar storage metaphor.

Avoid When

Avoid it when the content is not actually grouped or when the metaphor would slow comprehension.

Timing

250-450ms for flap and content reveal together.

Easing

Use ease-out with a slight 3D rotation for the flap; avoid elastic wobble.

Risk Tags

overdesignedaccessibility sensitive

Alternatives

Accordion Expand Popover Coach Step Pixel Dissolve Transition

✓When to Use

File managers and document collections
Project cards that reveal contained assets
Educational or onboarding interfaces that introduce grouped resources

✕When NOT to Use

Generic cards with no folder metaphor
Content that should be visible immediately
Serious enterprise pages where the metaphor feels childish

Configuration Tips

01Use the folder metaphor only when grouping is real
02Keep the opened content readable, not hidden behind the flap
03Pair the motion with a clear expanded state

You've Seen It In

macOS Finder metaphorsDocument appsProject dashboards

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a project folder card that opens on click to reveal two documents inside. Use a subtle folder flap rotation and slide the documents upward.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function FolderOpenReveal({ open }: { open: boolean }) {
  return (
    <button aria-expanded={open} className="relative h-36 w-56 rounded-2xl text-left">
      <span className="absolute left-5 top-1 h-8 w-24 rounded-t-xl bg-amber-300" />
      <span className="absolute inset-x-0 bottom-0 h-28 rounded-2xl bg-amber-400 shadow-lg" />
      <span className={`absolute bottom-4 left-5 right-5 rounded-xl bg-white p-3 text-sm font-medium text-stone-800 shadow transition duration-300 ${open ? '-translate-y-8 opacity-100' : 'translate-y-2 opacity-60'}`}>
        Q2 Research
      </span>
      <span className={`absolute inset-x-0 bottom-0 h-28 origin-bottom rounded-2xl bg-amber-500 transition-transform duration-300 ${open ? '[transform:perspective(800px)_rotateX(-24deg)]' : ''}`} />
    </button>
  );
}

Related Effects

Accordion Expand

A panel that smoothly grows in height to reveal hidden content, pushing the elements below it smoothly downwards.

Pixel Dissolve Transition

A grid of pixel blocks dissolves or expands to reveal new content, giving a digital transition a chunky, retro feel.

Staggered Menu Open

A menu opens by revealing its items one after another, making the list structure readable without feeling like a sudden block of links.