CRT

在云境TS 中打开并复制 →

内容预览

# CRT One sharpened curved-glass CRT tube driving four screens: the Matrix-era boot terminal, a monochrome film leader, a noise-torn blue signal fault, and an 8-bit console title. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/crt · 预览动画：https://threeui.com/previews/crt.webm > 分类：Backgrounds > 包含变体（4）：terminal、cinematic、blue-screen、nintendo /* ===== src/shaders/crt/CrtBackground.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { createCrtRenderer, crtStyle, CRT_DEFAULTS, CRT_VARIANTS, type CrtOptions } from "./crtRenderer"; import type { CrtVariant } from "./crtScreens"; export { CRT_VARIANTS }; export type { CrtVariant }; export type CrtBackgroundProps = Partial & { className?: string }; export function CrtBackground({ className = "", ...props }: CrtBackgroundProps) { const hostRef = useRef(null), canvasRef = useRef(null), optionsRef = useRef({ ...CRT_DEFAULTS, ...props }); optionsRef.current = { ...CRT_DEFAULTS, ...props }; useEffect(() => { const host = hostRef.current, canvas = canvasRef.current; if (!host || !canvas) return undefined; const renderer = createCrtRenderer(host, canvas, () => optionsRef.current); let frame = 0, visible = true; const resize = () => { renderer.resize(); renderer.render(performance.now()); }, tick = (now: number) => { renderer.render(now); frame = visible && !document.hidden ? requestAnimationFrame(tick) : 0; }; const resizeObserver = new ResizeObserver(r

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