ASSETS / MEDIA & SAMPLES
从素材,到能用的起点。
官方样本与可编辑素材,共 29 项:网站模板、UI 区块、动效片段与组件示例,带预览、授权与质量说明。
WEBSITE · HTML / CSS · 响应式Northstar — 空间叙事
以编辑式排版与几何建筑视觉,呈现克制的品牌叙事。可在工作台修改品牌、标题、介绍和主题色。
BACKGROUND · CSS · 轻量动效Vector Field — 向量气流
无需外部图片与 WebGL 的原创 CSS 流线背景。适合首屏或品牌展示,导出包含低动态偏好回退。
INTERACTION · JavaScript · 可调参数Orbital — 轨道画廊
使用原创几何卡片的循环轨道画廊。进入 Motion Lab 调整速度、半径、景深和卡片倾斜,并导出相同动效。
UI ELEMENTS · HTML / CSS · 状态反馈Tactile — 触感控件
森林绿触感按钮与轻量开关示例。点击按钮可体验状态反馈;支持独立示例源码导出。
SECTION · HTML / CSS · Bento 布局Signal — 数据区块
可直接嵌入页面的数据展示区块。强调信息层级与疏密关系;其中数字为演示数据,不连接真实业务服务。
TYPOGRAPHY · CSS · 动态字距Elastic Type — 呼吸排版
以字距变化构建呼吸式排版,纯 CSS 实现。减少动态模式下保持静态展示。
NAVIGATION · HTML / CSS · 可组合Wayfinder — 品牌导航
导航区块,支持品牌名称和工作/联系锚点。
FEATURES · HTML / CSS · 可组合Frame — 特性网格
三列特性布局,支持标题与介绍,移动端自动单列。
PRICING · HTML / CSS · 可组合Scale — 定价方案
三档定价展示。价格为样例,不接入支付。
FAQ · HTML / CSS · 可组合Clarity — 问答折叠
原生 details/summary 问答,支持键盘和独立展开。
CONTACT · HTML / CSS · 可组合Open Door — 联系区块
可编辑行动文案与邮件地址,使用 mailto,不冒充后端表单。
FOOTER · HTML / CSS · 可组合Signature — 品牌页脚
品牌落款与年份,适应深浅主题。
CTA BANNER · HTML / CSS · 响应式Call — 行动横幅
全宽行动召唤横幅:居中排版、强调色按钮与克制的背景层次,适合放在长页面末尾转化访客。
METRICS · HTML / CSS · 响应式Metrics — 数据指标带
三列关键指标带:大数字与说明文字的层级对比,手机端自动折为单列;数据为演示内容,非实时指标。
TIMELINE · HTML / CSS · 响应式Milestones — 里程碑
垂直里程碑时间线:适合展示项目进展、发展历程或服务步骤,节点与文案均可在工作台编辑。
FORM CONTROLS · HTML / CSS · 界面演示Fieldset — 表单控件集
输入框、下拉选择与开关的静态控件集:展示表单的节奏与状态样式;纯界面演示,不连接任何后端。
NAVIGATION · HTML / CSS · 无脚本Angle Tabs — 标签页
纯 CSS 实现的标签页切换(单选按钮技巧):无脚本依赖、可键盘操作,导出后行为一致。
WEBSITE · HTML / CSS · 响应式 · 多页Pulse — 数字健康
WEBSITE · HTML / CSS · 响应式Harbor — 港口物流
WEBSITE · HTML / CSS · 响应式Meridian — 精品旅行
UI · React · 可导出 · 受控组件Form — 联系表单
UI · React · 受控 · 多视图Calendar — 日程组件
UI · React · 响应式 · 头像墙Team — 团队卡片
UI · React · 静态 · 图标库Badges — 信任徽章墙
BLOCK · React · 懒加载 · 3-4 列Gallery — 瀑布流画廊
BLOCK · React · 自动轮播 · 头像Testimonial — 推荐语
BLOCK · React · 主题色 · 强调CTA Band — 通栏行动
MOTION · HTML / CSS / JS · 400ms · 可离线Hero Fade — 首屏入场
MOTION · HTML / JS · 滚动触发 · 可离线Counter Rush — 数据强调
素材为工程样本(engineering-sample / functional-beta),质量与无障碍状态如实标注,可在工作台内继续编辑。