Animated Top Dock
ThreeUI · CSS · 免费
在云境TS 中打开并复制 →
内容预览
# Animated Top Dock Sable’s proximity-spring menu in four fits: the authored centred dock, a modern command bar, a fitted pixel-terminal strip, and a vertical refracting Three.js glass rail. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/animated-top-dock · 预览动画：https://threeui.com/previews/animated-top-dock.webm > 分类：CSS > 包含变体（4）：sable、modern、retro、glass /* ===== src/shaders/animated-top-dock/AnimatedTopDock.tsx (tsx) ===== */ import { useEffect, useRef, useState, type ReactNode } from "react"; import { createTopDockController, type TopDockOptions } from "./topDockController"; export const ANIMATED_TOP_DOCK_VARIANTS = ["sable", "modern", "retro", "glass"] as const; export type AnimatedTopDockVariant = (typeof ANIMATED_TOP_DOCK_VARIANTS)[number]; export type AnimatedTopDockProps = { variant?: AnimatedTopDockVariant; proximity?: number; spring?: number; damping?: number; widthGrowth?: number; heightGrowth?: number; drop?: number; /* retro field */ pixelSize?: number; speed?: number; noise?: number; levels?: number; scanlines?: number; /* glass field */ particles?: number; thickness?: number; dispersion?: number; specular?: number; rim?: number; drift?: number; className?: string; }; export const ANIMATED_TOP_DOCK_DEFAULTS = { variant: "sable" as AnimatedTopDockVariant, proximity: 122, spring: 0.19, damping: 0.7, widthGrowth: 17, heightGrowth: 16, drop: 3.5, pixelSize: 4, speed: 1, noise: 1, levels: 7, scan
……（完整源码请在站内查看）