ViteReact启动器

elseform — Vite 启动器模板

作者 koative

Elseform 是 Koative 开源的网站模板集合，包含 100 个独立的 React + Vite 模板，每个模板拥有各自的布局、排版、配色与交互，并提供可搜索的在线画廊。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图首屏预览

从已核对的演示页面实际渲染并截图。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-16查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

包含 100 个独立模板，每个模板拥有自己的布局、排版、配色和交互，不是同一页面的换肤版本

画廊提供搜索、类别筛选、集合/名称/最新排序，以及桌面、平板和移动端视口控制

画廊支持 Light、Dark、System 三种外观，系统模式跟随设备，显式选择在浏览器存储可用时会被记住

每个 themes/<name>/ 目录都是可独立复制运行的 Vite 项目，并附带自己的 MIT 许可证副本

模板包含 CSS 3D 几何、受控旋转、动态文字和过渡效果，并遵循减少动态偏好设置

画廊按需加载实时预览，不会在后台同时运行全部模板

模板详细介绍

Elseform 是 Koative 发布的开源设计集合，包含 100 个彼此独立的网站模板。每个模板是一个独立的 Vite 项目，拥有自己的布局、排版、色彩、动效和交互，而不是同一落地页的换肤版本。模板覆盖摄影、时尚、音乐活动、餐饮、金融、医疗、教育、工业、零售等多种行业方向，README 中列出了每个模板对应的领域和特色。

仓库同时提供一个画廊界面，用于浏览、搜索、按类别筛选和排序模板，并支持 Light / Dark / System 外观切换。画廊按需加载实时预览，不会在后台同时运行全部模板。每个模板也可通过 /elseform/themes/<name>/ 直接访问。

技术栈方面，README 说明 React、TypeScript 和 Vite 是共同基础，使用 Bun workspaces 共享依赖，画廊使用 Tailwind CSS v4，图标来自 Lucide，各模板使用自己的作用域样式表。构建、预览和测试命令分别为 bun run build、bun run preview 和 bun run test。

需要留意的是，README 明确说明所有品牌、业务故事、财务数据、日程和分析内容均为虚构示例，预订、询价、购买和转账等流程仅为前端演示，不会发送消息、收款或持久化到服务器。购物车和界面状态默认保存在当前浏览器会话中，商业使用前需要接入自己的后端。

ViteReact启动器

适合你的项目吗？

适用场景

为不同行业快速寻找具有独立视觉方向的网站起点，例如建筑、时尚、金融、医疗、教育或零售
复制单个模板文件夹作为独立项目，在其基础上修改内容、样式和资源
通过画廊搜索、筛选和排序浏览全部模板，并切换桌面、平板和移动视口查看响应式效果
使用 GitHub Pages 工作流将整个集合或单个模板部署到静态托管环境
在模板中体验 CSS 3D、动态排版、可交互控件等前端演示，作为实现参考

适合人群

需要多个不同设计方向网站起点的设计师和前端开发者
希望基于 React、TypeScript 和 Vite 项目快速搭建演示或原型的团队
需要可独立提取、不依赖共享组件库的模板的开发者
希望使用 MIT 许可开源模板进行二次开发或学习的人

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
运行整个集合需要 Bun 1.4.3 或更新版本，依次执行 git clone、bun install 和 bun run dev，然后打开 http://localhost:5173/elseform/
2
单独使用某个模板时，将该 themes/<name>/ 文件夹复制到仓库外，再执行 bun install 和 bun run dev；bun run build 会生成该模板自己的 dist/ 目录
3
从 GitHub 直接复制模板前，需先下载仓库 ZIP 并解压出所需文件夹
4
运行 Playwright 集成检查前需先构建，并执行 bunx playwright install chromium 安装 Chromium
5
部署到 GitHub Pages 时在仓库 Settings → Pages 中选择 GitHub Actions 作为构建源，推送到 main 分支即可通过 .github/workflows/pages.yml 构建和部署；更换仓库路径需修改根 Vite 配置中的 base 并更新 README 与 gallery/main.tsx 中的公开链接

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
所有模板品牌、业务故事、财务数据、日程和分析均为虚构示例内容；预订、询价、购买和转账仅为前端演示，不会发送消息、收款或持久化到服务器，商业使用前需接入自己的后端。
第三方摄影和字体保留各自许可证，需查看 ASSETS.md 及各模板 README；将模板用于真实品牌时应替换为自己拥有的图片。
运行整个集合需要 Bun 1.4.3 或更新版本。
首次运行 Playwright 集成检查前需执行 bunx playwright install chromium 安装 Chromium。
若直接从 GitHub 复制模板，需先下载仓库 ZIP 并解压出所需文件夹。
使用模板时需替换演示联系地址和返回集合的链接，并更新 index.html 的标题与元数据。
部署到不同仓库路径时需修改根 Vite 配置中的 base，并更新 README 与 gallery/main.tsx 中的公开链接；根域部署应使用 /。
部署到 GitHub Pages 需在仓库 Settings → Pages 中选择 GitHub Actions 作为构建源，并推送到 main 分支。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

All template brands, business stories, financial balances, schedules and analytics are fictional sample content. Reservations, inquiries, purchases and transfers are front-end demonstrations: they do not send messages, take payments or persist to a server. Cart and interface state live in the current browser session unless a template documents otherwise. Connect your own backend before using those flows commercially.
README 原文

The source code is available under the **[MIT license](LICENSE)**. Third-party photography and fonts retain their respective licenses; see **[ASSETS.md](ASSETS.md)** and the template READMEs. Replace photos with imagery you own when adapting a template for a real brand.
README 原文

Requires [Bun](https://bun.sh) 1.4.3 or newer.
README 原文

For a fresh Playwright installation, run `bunx playwright install chromium` before the integration checks.
README 原文

`bun run build` creates that template's own `dist/` directory. Its relative base works on a static host or under a subdirectory. If you copy a template directly from GitHub, download the repository ZIP first and extract the folder you want.
README 原文

Edit `src/App.tsx` for content and interactions, `src/styles.css` for the visual system, and `src/assets/` for photography. Update `index.html` with your title and metadata. Replace demo contact addresses and links back to the collection. Each folder's README explains its specific controls and assets.
README 原文

For a different repository path, change `base` in the root Vite configuration and update the public links in this README and `gallery/main.tsx`. For a root-domain deployment, use `/`.
README 原文

In repository **Settings → Pages**, choose **GitHub Actions** as the build source. Push to `main` to build and deploy through `.github/workflows/pages.yml`. No custom domain is needed. This repository does not change the hosting or domain configuration of koative.com.
README 原文

https://github.com/koative/elseform/blob/main/LICENSE https://github.com/koative/elseform/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-16。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 85 / 100
技术栈: Vite · React
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-10-16
截图检查日期: 2026-10-16

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 6040935e0c8efbf9bda78599e24430db7ed19aff5985ef4de91047f50879b253

2026-10-16T01:43:41.535Z

来源文件 / 仓库

<div align="center">

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="public/elseform-wordmark-dark.svg" />
  <img src="public/elseform-wordmark.svg" alt="Elseform" width="230" />
</picture>

### Start with something else.

100 distinct website templates. Beautifully different. Open source. Entirely yours.

**[Explore the collection →](https://koative.github.io/elseform/)** · **[Koative](https://koative.com)**

![React](https://img.shields.io/badge/React-19-20232a?logo=react&logoColor=61dafb)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?logo=typescript&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-7-646cff?logo=vite&logoColor=white)
![Bun](https://img.shields.io/badge/Bun-workspaces-f9f1e1?logo=bun&logoColor=222)
![License](https://img.shields.io/badge/license-MIT-303cdb)

</div>

[![Elseform — Start with something else](public/elseform-social.png)](https://koative.github.io/elseform/)

**Elseform** is an independent design collection by [Koative](https://koative.com). Find a starting point, explore a live demo, and make it your own.

This collection brings together one hundred deliberately different websites: photographic editorials, kinetic posters, spatial experiments, useful dashboards, and thoughtful storefronts. Each template owns its layout, typography, color palette, motion and interactions. These are separate design directions, not one hundred skins on the same landing page.

## Gallery appearance

Choose **Light**, **Dark** or **System** in the gallery. System follows your device’s appearance; an explicit choice is remembered on this device when browser storage is available. If storage is unavailable, the selected appearance still works for the current visit.

Appearance changes apply to the Elseform gallery and preview shell. Each template keeps its own visual identity, including inside the live preview.

## The collection

![All 100 Elseform templates](public/previews/collection.webp)

| Template                                 | World                   | Signature                                   | Live demo                                                            |
| ---------------------------------------- | ----------------------- | ------------------------------------------- | -------------------------------------------------------------------- |
| **[Forma](themes/forma)**                | Architecture            | Editorial, Project index                    | [Explore ↗](https://koative.github.io/elseform/themes/forma/)        |
| **[Orbit](themes/orbit)**                | Aerospace               | 3D motion, Interactive                      | [Explore ↗](https://koative.github.io/elseform/themes/orbit/)        |
| **[Muse](themes/muse)**                  | Fashion                 | Art direction, Collection                   | [Explore ↗](https://koative.github.io/elseform/themes/muse/)         |
| **[Pulse](themes/pulse)**                | Music & events          | Kinetic type, Schedule                      | [Explore ↗](https://koative.github.io/elseform/themes/pulse/)        |
| **[Haven](themes/haven)**                | Hospitality             | Immersive, Reservations                     | [Explore ↗](https://koative.github.io/elseform/themes/haven/)        |
| **[Ledger](themes/ledger)**              | Finance                 | Workspace, 3D card                          | [Explore ↗](https://koative.github.io/elseform/themes/ledger/)       |
| **[Ember](themes/ember)**                | Restaurant              | Menu, Table booking                         | [Explore ↗](https://koative.github.io/elseform/themes/ember/)        |
| **[Atelier](themes/atelier)**            | Creative studio         | Portfolio, Expressive                       | [Explore ↗](https://koative.github.io/elseform/themes/atelier/)      |
| **[Signal](themes/signal)**              | Analytics               | Dashboard, Data viz                         | [Explore ↗](https://koative.github.io/elseform/themes/signal/)       |
| **[Still](themes/still)**                | Wellness                | Slow motion, Breathing                      | [Explore ↗](https://koative.github.io/elseform/themes/still/)        |
| **[Terrain](themes/terrain)**            | Outdoor                 | Adventure, Route finder                     | [Explore ↗](https://koative.github.io/elseform/themes/terrain/)      |
| **[Roast](themes/roast)**                | Coffee shop             | Storefront, Local cart                      | [Explore ↗](https://koative.github.io/elseform/themes/roast/)        |
| **[Frame](themes/frame)**                | Photography             | Contact sheet, Image viewer                 | [Explore ↗](https://koative.github.io/elseform/themes/frame/)        |
| **[Monograph](themes/monograph)**        | Independent journal     | Editorial, Reading room                     | [Explore ↗](https://koative.github.io/elseform/themes/monograph/)    |
| **[Index](themes/index)**                | Bookstore               | Book catalog, Local bag                     | [Explore ↗](https://koative.github.io/elseform/themes/index/)        |
| **[Bloom](themes/bloom)**                | Floral studio           | Bouquet builder, Seasonal                   | [Explore ↗](https://koative.github.io/elseform/themes/bloom/)        |
| **[Velo](themes/velo)**                  | Performance cycling     | Configurator, Performance                   | [Explore ↗](https://koative.github.io/elseform/themes/velo/)         |
| **[Prism](themes/prism)**                | Design conference       | Event agenda, Tickets                       | [Explore ↗](https://koative.github.io/elseform/themes/prism/)        |
| **[Nocturne](themes/nocturne)**          | Listening bar           | 3D turntable, Listening room                | [Explore ↗](https://koative.github.io/elseform/themes/nocturne/)     |
| **[Arcade](themes/arcade)**              | Indie games             | Playable, Game studio                       | [Explore ↗](https://koative.github.io/elseform/themes/arcade/)       |
| **[Kiln](themes/kiln)**                  | Ceramic objects         | Object gallery, 3D display                  | [Explore ↗](https://koative.github.io/elseform/themes/kiln/)         |
| **[Aura](themes/aura)**                  | Skincare                | Ritual builder, Beauty                      | [Explore ↗](https://koative.github.io/elseform/themes/aura/)         |
| **[Tide](themes/tide)**                  | Ocean conservation      | Volunteer, Conservation                     | [Explore ↗](https://koative.github.io/elseform/themes/tide/)         |
| **[Relay](themes/relay)**                | Logistics               | Operations, Tracking                        | [Explore ↗](https://koative.github.io/elseform/themes/relay/)        |
| **[Solace](themes/solace)**              | Healthcare clinic       | Healthcare, Booking, Calm                   | [Explore ↗](https://koative.github.io/elseform/themes/solace/)       |
| **[Helix](themes/helix)**                | Biotechnology           | Research library, Molecular model           | [Explore ↗](https://koative.github.io/elseform/themes/helix/)        |
| **[Aperture](themes/aperture)**          | Independent cinema      | Cinematic, Programme, Tickets               | [Explore ↗](https://koative.github.io/elseform/themes/aperture/)     |
| **[Counsel](themes/counsel)**            | Law practice            | Legal, Editorial, Enquiry                   | [Explore ↗](https://koative.github.io/elseform/themes/counsel/)      |
| **[Grid](themes/grid)**                  | Renewable Energy        | Solar planner, Daylight model               | [Explore ↗](https://koative.github.io/elseform/themes/grid/)         |
| **[Tempo](themes/tempo)**                | Dance studio            | Kinetic, Timetable, Bold                    | [Explore ↗](https://koative.github.io/elseform/themes/tempo/)        |
| **[Meridian](themes/meridian)**          | Real estate             | Property, Map, Search                       | [Explore ↗](https://koative.github.io/elseform/themes/meridian/)     |
| **[Forge](themes/forge)**                | Precision Manufacturing | CSS 3D, Industrial, Configurator            | [Explore ↗](https://koative.github.io/elseform/themes/forge/)        |
| **[Summit](themes/summit)**              | Climbing gym            | Route map, Hold walkthrough                 | [Explore ↗](https://koative.github.io/elseform/themes/summit/)       |
| **[Equinox](themes/equinox)**            | Planetarium             | Celestial atlas, Visit planner              | [Explore ↗](https://koative.github.io/elseform/themes/equinox/)      |
| **[Campus](themes/campus)**              | Online learning         | Learning workspace, Observation study       | [Explore ↗](https://koative.github.io/elseform/themes/campus/)       |
| **[Vector](themes/vector)**              | Automotive              | Cinematic, Automotive, Configurator         | [Explore ↗](https://koative.github.io/elseform/themes/vector/)       |
| **[Chapter](themes/chapter)**            | Podcast publication     | Editorial, Audio, Journal                   | [Explore ↗](https://koative.github.io/elseform/themes/chapter/)      |
| **[Civic](themes/civic)**                | Public services         | Government, Directory, Search               | [Explore ↗](https://koative.github.io/elseform/themes/civic/)        |
| **[Cipher](themes/cipher)**              | Cybersecurity           | Access review, Quiet, Product UI            | [Explore ↗](https://koative.github.io/elseform/themes/cipher/)       |
| **[Ink](themes/ink)**                    | Tattoo studio           | Flashbook, Minimal, Booking                 | [Explore ↗](https://koative.github.io/elseform/themes/ink/)          |
| **[Vow](themes/vow)**                    | Wedding planning        | Wedding, Folio, Planner                     | [Explore ↗](https://koative.github.io/elseform/themes/vow/)          |
| **[Stack](themes/stack)**                | Developer Documentation | Documentation, Code, Playground             | [Explore ↗](https://koative.github.io/elseform/themes/stack/)        |
| **[Proof](themes/proof)**                | Artisan bakery          | Tactile, Order sheet, Bakery                | [Explore ↗](https://koative.github.io/elseform/themes/proof/)        |
| **[Atlas](themes/atlas)**                | Public transport        | Route planner, Network map                  | [Explore ↗](https://koative.github.io/elseform/themes/atlas/)        |
| **[Kindred](themes/kindred)**            | Pet adoption            | Pets, Adoption, Playful                     | [Explore ↗](https://koative.github.io/elseform/themes/kindred/)      |
| **[Flux](themes/flux)**                  | Workflow Automation     | Workflow editor, Condition testing          | [Explore ↗](https://koative.github.io/elseform/themes/flux/)         |
| **[Grove](themes/grove)**                | Farm & CSA              | Seasonal, Calendar, Organic                 | [Explore ↗](https://koative.github.io/elseform/themes/grove/)        |
| **[Odyssey](themes/odyssey)**            | Travel planning         | Travel, Itinerary, Journal                  | [Explore ↗](https://koative.github.io/elseform/themes/odyssey/)      |
| **[Loom](themes/loom)**                  | Textiles & Materials    | Material library, Sample box                | [Explore ↗](https://koative.github.io/elseform/themes/loom/)         |
| **[Palette](themes/palette)**            | Art supplies            | Color lab, Mixing ramp                      | [Explore ↗](https://koative.github.io/elseform/themes/palette/)      |
| **[Lumen](themes/lumen)**                | Eyewear                 | Eyewear, 3D, Configurator                   | [Explore ↗](https://koative.github.io/elseform/themes/lumen/)        |
| **[Vault](themes/vault)**                | Insurance               | Plan explorer, Live summary                 | [Explore ↗](https://koative.github.io/elseform/themes/vault/)        |
| **[Drift](themes/drift)**                | Surf school             | Coastal, Field guide, Lessons               | [Explore ↗](https://koative.github.io/elseform/themes/drift/)        |
| **[Commons](themes/commons)**            | Coworking               | Floor plan, Day passes                      | [Explore ↗](https://koative.github.io/elseform/themes/commons/)      |
| **[Heirloom](themes/heirloom)**          | Jewelry atelier         | Jewelry, 3D rotation                        | [Explore ↗](https://koative.github.io/elseform/themes/heirloom/)     |
| **[Harbor](themes/harbor)**              | Port Operations         | Port operations, Map, Workspace             | [Explore ↗](https://koative.github.io/elseform/themes/harbor/)       |
| **[Chroma](themes/chroma)**              | Hair salon              | Lookbook, Editorial, Appointments           | [Explore ↗](https://koative.github.io/elseform/themes/chroma/)       |
| **[Saffron](themes/saffron)**            | Grocery market          | Grocery, Seasonal, Basket                   | [Explore ↗](https://koative.github.io/elseform/themes/saffron/)      |
| **[Alloy](themes/alloy)**                | Construction            | Construction, Blueprint, Project index      | [Explore ↗](https://koative.github.io/elseform/themes/alloy/)        |
| **[Encore](themes/encore)**              | Theatre                 | Theatre, Seating, Dramatic                  | [Explore ↗](https://koative.github.io/elseform/themes/encore/)       |
| **[Nest](themes/nest)**                  | Childcare               | Childcare, Timetable, Playful               | [Explore ↗](https://koative.github.io/elseform/themes/nest/)         |
| **[Circuit](themes/circuit)**            | Electronics Repair      | Repair intake, Exploded hardware            | [Explore ↗](https://koative.github.io/elseform/themes/circuit/)      |
| **[Field](themes/field)**                | Community sports        | Sports, Match hub, Community                | [Explore ↗](https://koative.github.io/elseform/themes/field/)        |
| **[Gavel](themes/gavel)**                | Auctions                | Lot catalog, Demo bidding                   | [Explore ↗](https://koative.github.io/elseform/themes/gavel/)        |
| **[Brine](themes/brine)**                | Seafood market          | Market counter, Basket, Coastal             | [Explore ↗](https://koative.github.io/elseform/themes/brine/)        |
| **[Folio](themes/folio)**                | Printmaking gallery     | Print archive, Original geometry, Shortlist | [Explore ↗](https://koative.github.io/elseform/themes/folio/)        |
| **[Patina](themes/patina)**              | Vintage furniture       | Vintage objects, Interior, Shortlist        | [Explore ↗](https://koative.github.io/elseform/themes/patina/)       |
| **[Nectar](themes/nectar)**              | Apiary & honey          | Tasting notes, 3D jar, Seasonal             | [Explore ↗](https://koative.github.io/elseform/themes/nectar/)       |
| **[Alpine](themes/alpine)**              | Ski equipment rental    | Rental calculator, Equipment, Mountain      | [Explore ↗](https://koative.github.io/elseform/themes/alpine/)       |
| **[Sonnet](themes/sonnet)**              | Language school         | Languages, Course finder, Word cards        | [Explore ↗](https://koative.github.io/elseform/themes/sonnet/)       |
| **[Mosaic](themes/mosaic)**              | Interior design         | Material library, Moodboard, Interiors      | [Explore ↗](https://koative.github.io/elseform/themes/mosaic/)       |
| **[Lacquer](themes/lacquer)**            | Nail art studio         | Color configurator, Sculptural, Beauty      | [Explore ↗](https://koative.github.io/elseform/themes/lacquer/)      |
| **[Truffle](themes/truffle)**            | Chocolate atelier       | Gift builder, 3D box, Chocolate             | [Explore ↗](https://koative.github.io/elseform/themes/truffle/)      |
| **[Score](themes/score)**                | Music lessons           | Playable piano, Web Audio, Lesson planner   | [Explore ↗](https://koative.github.io/elseform/themes/score/)        |
| **[Sprout](themes/sprout)**              | Garden nursery          | Plant finder, Garden planner, Botanical     | [Explore ↗](https://koative.github.io/elseform/themes/sprout/)       |
| **[Ripple](themes/ripple)**              | Swimming academy        | Timetable, Lane motion, Lessons             | [Explore ↗](https://koative.github.io/elseform/themes/ripple/)       |
| **[Ballast](themes/ballast)**            | Rail freight            | Dispatch board, Route motion                | [Explore ↗](https://koative.github.io/elseform/themes/ballast/)      |
| **[Delta](themes/delta)**                | Water management        | Water model, Fluid motion                   | [Explore ↗](https://koative.github.io/elseform/themes/delta/)        |
| **[Strata](themes/strata)**              | Geological survey       | Field atlas, Layer study                    | [Explore ↗](https://koative.github.io/elseform/themes/strata/)       |
| **[Cadence](themes/cadence)**            | Hiring workspace        | Hiring workspace, Shortlist                 | [Explore ↗](https://koative.github.io/elseform/themes/cadence/)      |
| **[Conduit](themes/conduit)**            | API integrations        | Event simulator, Developer tool             | [Explore ↗](https://koative.github.io/elseform/themes/conduit/)      |
| **[Lumenary](themes/lumenary)**          | Lighting design         | Object study, CSS lighting                  | [Explore ↗](https://koative.github.io/elseform/themes/lumenary/)     |
| **[Waypoint](themes/waypoint)**          | Flight school           | Heading dial, Route planner                 | [Explore ↗](https://koative.github.io/elseform/themes/waypoint/)     |
| **[Torque](themes/torque)**              | Motorcycle workshop     | Mechanical motion, Service builder          | [Explore ↗](https://koative.github.io/elseform/themes/torque/)       |
| **[Verdant](themes/verdant)**            | Urban farming           | Garden planner, Growing journal             | [Explore ↗](https://koative.github.io/elseform/themes/verdant/)      |
| **[Parcel](themes/parcel)**              | Postal shipping         | Rate calculator, Label preview              | [Explore ↗](https://koative.github.io/elseform/themes/parcel/)       |
| **[Beacon](themes/beacon)**              | Preparedness            | Household checklist, Progress states        | [Explore ↗](https://koative.github.io/elseform/themes/beacon/)       |
| **[Keystone](themes/keystone)**          | Structural engineering  | Structural diagram, Material study          | [Explore ↗](https://koative.github.io/elseform/themes/keystone/)     |
| **[Aurora](themes/aurora)**              | Northern lights lodge   | Immersive, Stay planner                     | [Explore ↗](https://koative.github.io/elseform/themes/aurora/)       |
| **[Reel](themes/reel)**                  | Documentary film        | Film archive, Editorial                     | [Explore ↗](https://koative.github.io/elseform/themes/reel/)         |
| **[Botanica](themes/botanica)**          | Botanical garden        | Field guide, Visit planner                  | [Explore ↗](https://koative.github.io/elseform/themes/botanica/)     |
| **[Cove](themes/cove)**                  | Sailing charters        | Route map, Voyages                          | [Explore ↗](https://koative.github.io/elseform/themes/cove/)         |
| **[Fable](themes/fable)**                | Children’s museum       | Playful, Programme                          | [Explore ↗](https://koative.github.io/elseform/themes/fable/)        |
| **[Cadence House](themes/cadencehouse)** | Recording studio        | 3D console, Sound studio                    | [Explore ↗](https://koative.github.io/elseform/themes/cadencehouse/) |
| **[Pour](themes/pour)**                  | Natural wine shop       | Product shelf, Case builder                 | [Explore ↗](https://koative.github.io/elseform/themes/pour/)         |
| **[Ascent](themes/ascent)**              | Paragliding school      | Adventure, Flight planner                   | [Explore ↗](https://koative.github.io/elseform/themes/ascent/)       |
| **[Emberlight](themes/emberlight)**      | Candle atelier          | Material study, Scent finder                | [Explore ↗](https://koative.github.io/elseform/themes/emberlight/)   |
| **[Sanctuary](themes/sanctuary)**        | Wildlife rescue         | Conservation, Animal journal                | [Explore ↗](https://koative.github.io/elseform/themes/sanctuary/)    |
| **[Kinetic](themes/kinetic)**            | Sports rehabilitation   | Movement, Care pathways                     | [Explore ↗](https://koative.github.io/elseform/themes/kinetic/)      |
| **[Horizon](themes/horizon)**            | Science publication     | Publication, Reading list                   | [Explore ↗](https://koative.github.io/elseform/themes/horizon/)      |

## The 100-template edition

This edition adds 36 independent templates and revisits the existing 64. The Elseform gallery brings an artistic liquid-glass identity, real screenshot previews, search, filters and responsive live demos. Save a local shortlist or use **Surprise me** to discover a design. Ten existing templates received focused improvements:

| Template                    | What changed                                                                                                                                                                                                                             |
| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Helix](themes/helix)       | The molecular specimen now exposes Backbone and Surface representations, with selected-study color and metadata. Layered geometric chains replace the isolated bead ring; motion can be paused.                                          |
| [Grid](themes/grid)         | The opening now contains an isometric 24-position solar array linked to the panel count and an adjustable time-of-day generation study. The planner explains home and battery energy paths; model values remain explicitly illustrative. |
| [Vault](themes/vault)       | A local interior photograph and live plan-summary sheet replace the generic geometric hero. The sheet reflects selected home, belongings value, plan and illustrative price. Muted text contrast is stronger.                            |
| [Campus](themes/campus)     | A photographic observation study replaces the repeated yellow typographic placeholder. Shape, Light and Rhythm lenses change the crop and teaching prompt while preserving lesson progress and notes.                                    |
| [Loom](themes/loom)         | Material selection and specifications form a two-column workspace. The active detail is sticky beside the swatch grid on desktop and follows it on mobile. Procedural fabric studies use more visible weave and fold depth.              |
| [Palette](themes/palette)   | Pigment specimens now choose a mixing input. Five proportion swatches let visitors compare and select blends. Mixed and saved color text chooses contrasting black or white from relative luminance.                                     |
| [Circuit](themes/circuit)   | An interactive exploded phone model replaces decorative circuit paths. Visitors assemble the device or inspect its screen, power cell and logic board. Layer motion respects reduced-motion preferences.                                 |
| [Heirloom](themes/heirloom) | The ring has fourteen depth layers and visitor-controlled rotation, with an explicit animation pause. Metal and engraving controls remain independent and working.                                                                       |
| [Summit](themes/summit)     | The route map gains distinct wall facets, bolt positions and a numbered selected hold. Previous/next controls walk the six-hold sequence with bounded disabled states.                                                                   |
| [Flux](themes/flux)         | A sample project budget makes the condition meaningful. Failed conditions stop subsequent simulated actions and show skipped outcomes. Reset restores default condition and sample data.                                                 |

## Start the whole collection

Requires [Bun](https://bun.sh) 1.4.3 or newer.

```sh
git clone https://github.com/koative/elseform.git
cd elseform
bun install
bun run dev
```

Open **http://localhost:5173/elseform/**. The gallery includes search, category filters, collection/name/newest sorting, keyboard-accessible previews and desktop, tablet and mobile viewport controls. Every demo is also directly addressable at `/elseform/themes/<name>/`.

```sh
bun run check     # TypeScript validation
bun run build     # Gallery + all one hundred templates → dist/
bun run preview   # Serve the production build
bun run test      # Playwright integration checks (build first)
```

For a fresh Playwright installation, run `bunx playwright install chromium` before the integration checks.

## Take one template

Each `themes/<name>/` folder is a standalone Vite project and includes its own MIT license copy. Copy a folder out of this repository, then install and run it:

```sh
cp -R themes/forma ../my-website
cd ../my-website
bun install
bun run dev
```

`bun run build` creates that template's own `dist/` directory. Its relative base works on a static host or under a subdirectory. If you copy a template directly from GitHub, download the repository ZIP first and extract the folder you want.

Edit `src/App.tsx` for content and interactions, `src/styles.css` for the visual system, and `src/assets/` for photography. Update `index.html` with your title and metadata. Replace demo contact addresses and links back to the collection. Each folder's README explains its specific controls and assets.

## Repository map

```text
├── gallery/                 # Collection UI, catalog and preview shell
├── themes/
│   ├── forma/               # An independent React + Vite app
│   ├── orbit/
│   └── ...                  # One hundred template folders in total
├── public/previews/         # Real screenshots used by the gallery
├── tests/                   # Production-route and interaction checks
├── scripts/                 # Preview capture tooling
├── .github/workflows/       # GitHub Pages build and deployment
└── vite.config.ts           # Collection multi-page build
```

React, TypeScript and Vite form the common foundation. Bun workspaces keep dependency installation shared. The gallery includes Tailwind CSS v4; individual templates use their own scoped stylesheets so they remain easy to extract and don't depend on a shared component kit. Lucide supplies consistent interface icons.

## Motion and accessibility

The templates include CSS 3D geometry, controlled rotations, animated type and deliberate transitions. Reduced-motion preferences are respected. Interactive controls use native buttons and form elements; keyboard focus remains visible. Photography is included locally. The gallery loads a live preview only when requested instead of running one hundred websites in the background.

## Publish with GitHub Pages

This repository is configured for **https://koative.github.io/elseform/**. The root Vite base is `/elseform/`, and the production build contains a real HTML entry for every demo, so direct links do not require a single-page-app fallback.

In repository **Settings → Pages**, choose **GitHub Actions** as the build source. Push to `main` to build and deploy through `.github/workflows/pages.yml`. No custom domain is needed. This repository does not change the hosting or domain configuration of koative.com.

For a different repository path, change `base` in the root Vite configuration and update the public links in this README and `gallery/main.tsx`. For a root-domain deployment, use `/`.

## Demo boundaries

All template brands, business stories, financial balances, schedules and analytics are fictional sample content. Reservations, inquiries, purchases and transfers are front-end demonstrations: they do not send messages, take payments or persist to a server. Cart and interface state live in the current browser session unless a template documents otherwise. Connect your own backend before using those flows commercially.

The source code is available under the **[MIT license](LICENSE)**. Third-party photography and fonts retain their respective licenses; see **[ASSETS.md](ASSETS.md)** and the template READMEs. Replace photos with imagery you own when adapting a template for a real brand.

## Make it your own

Keep the personality or take it somewhere completely different. Contributions that bring a genuinely new composition, sector or interaction are welcome. Please include responsive behavior, reduced-motion support, useful demo controls and documented assets.

---

Made by **[Koative](https://koative.com)**. Independent ideas, shared openly.

反馈内容错误