Frankaa 发布零依赖图库库：滑动直接驱动 WebGL 着色器

一个零依赖的画廊库，让图片像真实物体一样运动。 可用于轮播、图片网格、画廊等场景。 在 ChatGPT 中打开在 Claude 中打开复制提示词已复制 procession滑块 原生 scroll-snap 轨道：滑动由浏览器自身处理，与惯性保持 1:1 同步。图片接近时预加载第一张之后的照片。 import { procession, unfurl } from "frankaa"; import "frankaa/style.css"; const items = [{ src: "/a-800.jpg", full: "/a.jpg", alt: "Terrace" }, "/b.jpg", "/c.jpg"]; const slider = procession(card, items, { label: "Sea terrace", onSelect: (i) => unfurl(items, { start: i, origin: (n) => slider.image(n), onChange: (n) => slider.go(n, false) }), }); "use client"; import { useRef } from "react"; import { Procession, useUnfurl } from "frankaa/react"; import "frankaa/style.css"; export function Card({ items }) { const slider = useRef(null); const lightbox = useUnfurl(items, { origin: (n) => slider.current?.image(n) ?? null, onChange: (n) => slider.current?.go(n, false) }); return <Procession ref={slider} items={items} label="Sea terrace" onSelect={(i) => lightbox.open(i)} />; unfurl灯箱 照片从原位升起，弹跳到全屏视图。像滑动胶片一样滑动，双指捏合或双击缩放，下拉关闭。 import { unfurl } from "frankaa"; thumbs.forEach((img, i) => img.closest("button").addEventListener("click", () => unfurl(items, { start: i, origin: (n) => thumbs[n], effect: "displacement" }))); const lightbox = useUnfurl(items, { origin: (n) => refs.current[n] ?? null }); // <button onClick={() => lightbox.open(i)}><img ref={(el) => (refs.current[i] = el)} ... /></button> drumline（dondo，非洲传讯鼓）胶片条 一条图片带置于刻度尺之下。可拖动或轻甩，向任意方向滚动，沿刻度尺滑动。聚焦的图片会放大；点击即可打开。 import { drumline } from "frankaa"; drumline(el, items, { preset: "ruler" }); // ticks, story cards, WebGL bend drumline(el, items, { preset: "numbers", fluid: "lerp" }); // "28 [29] 30", tall bars drumline(el, items, { preset: "minimal", colorFocus: true, onChange: (i) => {} }); import { Drumline } from "frankaa/react"; <Drumline items={items} preset="ruler" onChange={(i) => setAt(i)} /> together一份列表，一个选项 每个组件都接收相同的 items。各自选取所需的文件：滑块用 src，灯箱用 full，胶片条用 thumb。 unfurl(items, { start: i, strip: "ruler" }); // the lightbox with a drumline filmstrip unfurl(items, { strip: { preset: "numbers", fluid: "off" } }); // any drumline options drumline(el, items, { lightbox: { effect: "ripple", strip: "minimal" } }); // a tap opens the lightbox const lightbox = useUnfurl(items, { strip: "ruler" }); <Drumline items={items} preset="minimal" /> effects两张照片之间 内置着色器，也可使用你自己的。每次打开时都会在此播放。没有 WebGL 时，由 CSS 渲染器顶替。 本页的演示遵循这些设置。事件触发时会在下方打印。 包含完整 API、示例配方和规则的纯文件，也随包一起发布。