Character Carousel

在云境TS 中打开并复制 →

内容预览

# Character Carousel Two authored editorial character-card carousels collected as a light filmstrip and a dark responsive wave. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/character-carousel · 预览动画：https://threeui.com/previews/character-carousel.webm > 分类：UI Elements > 包含变体（2）：character-filmstrip、character-wave /* ===== src/shaders/character-carousel/CharacterCarousel.tsx (tsx) ===== */ import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react"; import characterFilmstripSource from "./sources/character-filmstrip.html?raw"; import characterWaveSource from "./sources/character-wave.html?raw"; export type CharacterCarouselVariant = "filmstrip" | "wave"; export type CharacterCarouselProps = { variant?: CharacterCarouselVariant; speed?: number; scale?: number; opacity?: number; hue?: number; saturation?: number; brightness?: number; className?: string; style?: CSSProperties; }; export const CHARACTER_CAROUSEL_DEFAULTS = { variant: "filmstrip", speed: 1, scale: 1, opacity: 1, hue: 0, saturation: 1, brightness: 1, } as const satisfies Required; const SOURCE_BY_VARIANT: Record = { filmstrip: characterFilmstripSource, wave: characterWaveSource, }; function clamp(value: number, minimum: number, maximum: number) { return Math.min(maximum, Math.max(minimum, value)); } function buildFocusedDocument(variant: CharacterCarouselVariant) { const focusStyles = ` :root { --character-carou

……（完整源码请在站内查看）