frosted-glass-ui-template — Next.js 后台模板

SHA-256: 00547444768de8bfdef070502c9b304a921bd176172f8f7275e249b1721ac2f8

2026-10-15T13:18:16.527Z

# Frosted glass UI template

Vesper V3 is an analytics dashboard with translucent glass panels and a procedural background that follows local time. Cream dominates during the day; navy dominates at night. The background moves continuously while the text and glass switch together between complete light and dark themes.

This repository contains only the V3 design. It includes a standalone visual reference and a Next.js implementation for adoption in an existing React application.

## Start here

- [Design system](docs/design-system.md): colours, typography, glass, spacing, charts, responsive behaviour, and component inventory.
- [Tech stack](docs/tech-stack.md): original implementation, React adaptation, and dependency boundaries.
- [Background and theming](docs/background-and-theming.md): the colour field, time schedule, UI switch, performance, and first paint.
- [Next.js integration](docs/nextjs-integration.md): component APIs, CSS Modules, Recharts, and integration with existing data tools.
- [Original V3 source](reference/v3): HTML, CSS, JavaScript, and SVG assets.

The [existing ChatGPT-hosted V3 demo](https://vesper-glass-analytics.lazzy-77.chatgpt.site/v3/) remains available under its existing access settings. Public access to this repository does not change access to that hosted demo. There is no GitHub Pages deployment.

## Run the React example

Use Node.js 22.14 or newer. Node 22 is used in CI.

```sh
npm ci
npm run dev
```

Open http://127.0.0.1:3000. The example uses Next.js 16.3.4 App Router, React and React DOM 19, TypeScript 5, Recharts 3, and plain CSS Modules. No Tailwind is used.

The time slider previews the entire day. "Use local time" resumes the device clock. The demo also accepts `?time=1140`, `?preview=day`, `?preview=night`, and `?preview=cycle`. The cycle previews 24 hours in 60 seconds.

## Run the original V3

```sh
npm run reference
```

Open http://127.0.0.1:4173. This command only requires Node; the static reference itself has no npm runtime dependencies. Its stylesheet loads DM Sans from Google Fonts. The React example bundles the same font locally.

The reference preserves V3's original visual assets and animation code. Its cross-version navigation was removed so it is self-contained. The React example retains the palette and GPU shader; its main charts use Recharts and illustrative daily data instead of the reference's hand-drawn SVG paths. Small differences in chart geometry and responsive measurements are expected.

## Reuse in an existing app

Copy `src/components/vesper/` into your project. Start with `ThemeBoundary` and `GlassPanel`; add the example dashboard or time controls as needed. Import components from their individual files to preserve their server/client boundaries. See the [integration guide](docs/nextjs-integration.md).

The gradient runs outside React rendering. Theme variables are prefixed `--vesper-` and applied only to the boundary element. Query caching, API calls, schema validation, and authentication stay in the host app.

## Validation

```sh
npm run check
```

This runs TypeScript, ESLint 9, Stylelint 17, focused behaviour tests, and a production Next.js build. Tests compare the React palette against the V3 reference across twilight in both directions and check the first-paint initializer, time selection, and sample totals. DOM integration tests also verify background startup on mounting and hydration, movement at a fixed preview time, slider-driven colour changes, and cleanup, with and without React Strict Mode. Browser visual testing is not part of this command.

Dashboard figures are sample data. Navigation, export, date controls, and most other dashboard elements are presentational. The time controls are live. This is a reference implementation, not a complete production component library or a claim of accessibility certification.

## Licence

Code and documentation are available under the [MIT licence](LICENSE). The bundled DM Sans font has its own [SIL Open Font License](public/fonts/OFL.txt). See [third-party notices](THIRD_PARTY_NOTICES.md).