Overlay Menu
オーバーレイメニュー
A panel that wipes up over the page, its links following one after another. Each label rides up inside its own clipped row, so it appears from behind the edge rather than fading in on top — that is what makes the entrance feel like the panel is being drawn rather than switched on. Escape closes it. Built with CSS clip-path↗↗, Framer Motion and Tailwind CSS.
Page content
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { AnimatePresence, motion } from "framer-motion"
import { useEffect, useState } from "react"
export type MenuLink = {
id: string,
label: string,
href: string,
meta?: string
How to use it3
"use client"
import { OverlayMenu } from "@/components/ui/overlay-menu"
const links = [
{ id: "work", label: "Work", href: "/work", meta: "12" },
{ id: "contact", label: "Contact", href: "/contact" },
]
export default function Page() {
Props
OverlayMenu
| Name | Default | Description |
|---|---|---|
| links | — | MenuLink[] Entries listed in the panel |
| height | 380 | number Height of the demo stage in pixels |
| dark | false | boolean Render the dark palette |
MenuLink (type)
| Name | Default | Description |
|---|---|---|
| id | — | string Stable key for the entry |
| label | — | string Link text |
| href | — | string Link target |
| meta | — | string Small text aligned to the right, such as a count |