Koi Studies
ThreeUI · CSS · 免费
在云境TS 中打开并复制 →
内容预览
# Koi Studies A tactile stack of three Japanese koi studies with CSS 3D depth, pointer tilt, drag and keyboard navigation, pixel-mask reveals, and animated halftone imagery. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/koi-studies · 预览动画：https://threeui.com/previews/koi-studies.webm > 分类：CSS /* ===== src/shaders/koi-studies/KoiStudies.tsx (tsx) ===== */ import { useState, type CSSProperties } from "react"; const KOI_STUDIES_SOURCE_URL = "/synthralos-halftone.html"; export type KoiStudiesProps = { className?: string; style?: CSSProperties; }; export function KoiStudies({ className = "", style }: KoiStudiesProps) { const [ready, setReady] = useState(false); return ( setReady(true)} style={{ position: "absolute", inset: 0, display: "block", width: "100%", height: "100%", border: 0, background: "#10100e", }} /> ); } /* ===== public/synthralos-halftone.html (html) ===== */ Koi Studies — Interactive Card Stack :root { --field: #10100e; --paper: #eee6d0; --muted: #a39b88; --accent: #c95c3f; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--field); } body { display: grid; place-items: center; background: radial-gradient(circle at 52% 42%, rgb(201 92 63 / 0.055), transparent 27rem), radial-gradient(circle at 45% 55%, rgb(238 230 208 / 0.035), transparent 40rem), var(--field); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
……（完整源码请在站内查看）