Sylva

ThreeUI · Hero · 免费
Sylva 预览

在云境TS 中打开并复制 →

内容预览

# Sylva The complete Sylva Living Green page, preserved with its Three.js scene, local typography, card imagery, and embedded liquid-metal buttons. The moss-root world with pale flowers, ferns, drifting pollen, the landing butterfly, and native liquid-metal controls behind the full hero layout. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/sylva-hero · 预览动画：https://threeui.com/previews/sylva-hero.webm > 分类：Hero > 包含变体（1）：living-green /* ===== public/landing-pages/inner-green-3d.html (html) ===== */ Sylva — Into the living world document.documentElement.className += " js"; @font-face{ font-family:'Lexend'; src:url('inner-green-assets/lexend-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ── design unit: 1u === 1px on the 1600 × 880 reference frame ───────── */ :root{ --u: calc(100vw / 1600); --ink: #ffffff; --ink-soft: rgba(255,255,255,.62); --ink-faint: rgba(255,255,255,.44); --rule: rgba(255,255,255,.055); --card: #f2f3ef; --card-ink: #23261f; --card-label: #7c8177; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } @media (min-width:1900px){ :root{ --u: calc(1900px / 1600); } } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ background:#383b

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