组件库
& 镜像站目录
所有 mirror 过的站、提取过的可复用组件,一处纵览、跨 session 可用。数据唯一来源 data/catalog.json。
01
镜像站
/ 27
02
组件
/ 11film-post
grain+vignette+纸纹理+色差 胶片后处理 overlay
bizarro-visualizer · components/redesign/film-post.tsx
demo →
signal-features
envelope/onset/bands 信号特征提炼(输入源无关)
bizarro-visualizer · lib/signal-features.ts
demo →
hud-label
HUD 坐标/数据标注
bizarro-visualizer · components/redesign/hud-label.tsx
demo →
dither-shadow presets
dither 引擎 + 场景预设族插值
bizarro-visualizer + iamnoman funky-shadow · components/redesign/dither-shadow.tsx
demo →
refero-pro-light
Refero Pro 结账庆祝动画原版 SVG:三环内阴影+移动光条+三通道 LUT+reveal 揭开,零 JS
Refero Pro 官方生产 bundle 1:1 移植 (Mike Bespalov) · components/pro-light.tsx
demo →
line-logo
canvas 竖线拼 Logo:hover 散开重组 + HUD 检测框
Cloudflare 竖线 Logo 技法 (ianneo_ai 复刻拆解) · components/line-logo.tsx
demo →
liquid-blobs
无限横排画廊 + 液态玻璃镜头折射(色散/nova/ring/rim wave)+ 拖拽惯性吸附 + focus 放大 + 入场 bloom
liquid-glass-carousel (three.js + GSAP) 1:1 移植 · lib/liquid-blobs/engine.ts
demo →
fframes · jianpu shader gallery
5 个 jianpu-wind shader preset 烘焙成 Shadertoy 层渲染成 22s mp4:Intro + 5 镜头交叉淡化,660 帧 5.4s 渲完
jianpu-wind shader-modules × fframes 1.4 (Rust + Skia Metal) · videos/
demo →
alive-border
feel alive 水彩纸框:SDF+分形噪声有机毛边 paper-mat overlay,画内颗粒+边缘 bleed 晕开+光雾,3 帧手绘 boil 描边;包 iframe 不挡交互(pointer-events-none),reduced-motion 静态降级
baothiento.com/bench 画纸拓边复刻 (https://x.com/baothiento/status/2110359970881343985) · dv-domochi/components/alive-border.tsx
demo →
paper-carousel
拍立得照片条:白纸框暖阴影+静置倾角,入场 blur 上浮 stagger,hover 回正放大+caption 光标跟随胶囊,移动端 snap 滑动
baothiento.com /about (framer-motion → CSS transition 移植) · components/paper-carousel.tsx
demo →
pdf-table
PDF 表格→响应式网页(grid/schedule/plain 三模式),A4 横版打印,窄屏卡片降级
lab · lib/pdf-table.ts + components/pdf-table-tool.tsx
demo →