SKEUOMORPHIC & 3D

Liquid Glass Folder Stack

A tactile 3D frosted-glass interactive folder component with procedural domain-warped liquid marble artwork, spring hinge physics, dynamic file fan, and interactive keyboard menu.

#skeuomorphic#3d#glassmorphism#canvas#spring-physics#procedural-art#typescript

Source on GitHub

components/flourish/liquid-glass-folder-stack.tsx

LIVE PREVIEWOpen in new tab

Next.js 16 • React 19 • TypeScript•Tailwind CSS v4

Registry Slug:liquid-glass-folder-stack

QUICKSTART

Make it yours.

Install the source, then customize it in your project.

REGISTRY ITEM

PACKAGE MANAGER

pnpm dlx shadcn@latest add https://flourish-ui.vercel.app/r/liquid-glass-folder-stack.json

Adds source to components/flourish/

02Usage example Next.js / React

import { LiquidGlassFolderStack } from "@/components/flourish/liquid-glass-folder-stack"

export default function Page() {
  return (
    <div className="flex justify-center p-12">
      <LiquidGlassFolderStack label="My Files" art="aurora" seed={3} />
    </div>
  )
}

First install? Run pnpm dlx shadcn@latest init once, then add this component. You get editable source code in your project.

EXPLORE MORE

More in Skeuomorphic & 3D

Browse Skeuomorphic & 3D

Tactile 3D Credit Card Form

A tactile, interactive 3D flippable credit card form component with dynamic input focus highlighting, number slot slide animations, Luhn validation, and smooth dual-sided flip transitions.

Digital Journal 3D Album

A photorealistic, highly interactive 3D digital journal with true physical flipbook mechanics and cinematic visuals, built for the Flourish UI component library.

Skeuomorphic Folio Notebook

A playful, highly interactive skeuomorphic take on a digital guestbook. It brings the tactile feel of a physical leather-bound journal into the browser with realistic page flips, handwritten typography, and organic ink features.