Uplink Loader
ThreeUI · CSS · 免费
在云境TS 中打开并复制 →
内容预览
# Uplink Loader A cinematic secure-uplink loader with stepped progress, illuminated telemetry ticks, neon readouts, technical corner markers, mirrored side rails, scanlines, and procedural grain. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/uplink-loader · 预览动画：https://threeui.com/previews/uplink-loader.webm > 分类：CSS /* ===== src/shaders/uplink-loader/UplinkLoader.tsx (tsx) ===== */ import { useState, type CSSProperties } from "react"; import uplinkLoaderSource from "./uplink-loader.html?raw"; export type UplinkLoaderProps = { className?: string; style?: CSSProperties; }; export function UplinkLoader({ className = "", style }: UplinkLoaderProps) { const [ready, setReady] = useState(false); return ( setReady(true)} style={{ position: "absolute", inset: 0, display: "block", width: "100%", height: "100%", border: 0, background: "#030806", }} /> ); } /* ===== src/shaders/uplink-loader/uplink-loader.html (html) ===== */ SYS.LINK — Uplink Sequence :root{ /* design canvas: 1200 x 800 units, scaled to fit the viewport */ --s: 1; --bg: #030806; --green: #2fe07d; --green-dim: rgba(55,225,130,.26); --line: rgba(120,255,185,.46); --ink-hi: #d9f4e6; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--bg); overflow:hidden; font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace; -webkit-font-smoothing:antialiased; } /* a cold pool of light behind the rig */ .pool{ p
……（完整源码请在站内查看）