lucerna-template — HTML 启动器模板

SHA-256: 7288415dc74064bf26686816e06b4cd547f503e50db819134000f10c1a21e597

2026-10-16T01:44:22.238Z

# Lucerna: a lighting maker site with Formgong forms

**Live demo:** https://lucerna.formgong.com · Download: the [latest release](https://github.com/formgong-hq/lucerna-template/releases/latest) zip.

[![Deploy to Cloudflare](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/formgong-hq/lucerna-template) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fformgong-hq%2Flucerna-template&project-name=lucerna&repository-name=lucerna)

Each button copies the site to your GitHub and publishes it. Then replace both `fk_your_access_key` in `index.html` of your copy with your Formgong access key (free at https://formgong.com/new) and commit: the host republishes on its own.

A one-page template for a maker or seller of LED lighting, in `index.html` with `css/style.css` and `js/main.js`. Motion runs on GSAP with ScrollTrigger and ScrollSmoother (smooth scrolling), self-hosted in `js/vendor`. The demo brand, Fulgor, its products, numbers and projects are fictional.

- **Loader.** On a black screen a dim light sweeps over the wordmark, it goes dark, then switches fully on like a tube warming up, and the screen fades away.
- **Header.** The logo, a frosted pill with the main links, and Contact, Search and Trade area on the right. "Products & Applications" opens a mega menu with categories. The search lists products as you type. The header hides on the way down and comes back on the way up. On phones a burger opens a panel that drops from the top.
- **Hero.** Two full-screen slides that wipe from one to the next, with the text rising in and a line under 01 / 02 that moves to the current slide.
- **Highlights.** A grid of cards (technical sheets, products, a counting number, dealers, the catalogue) that rise in a wave and drift at different speeds as you scroll.
- **Projects.** A strip of project photos you drag sideways, with a turning "drag" badge; the dots on each photo name the products used.
- **About and lighting zones.** A house at dusk with five switches; each one lights its own part of the picture.
- **Values.** Five stacked cards; one is open at a time.
- **Footer.** A deep blue footer with a big line, link columns (they fold on phones) and the legal line.
- **Forms.** Contact (the Contact button and "Write to us") in a side drawer, and a trade account request under the person icon.

## English

**Set up the forms**

1. Create a form in the Formgong dashboard (free at https://formgong.com/new) and copy its access key.
2. In `index.html`, replace both `fk_your_access_key` with that key (both forms may share one key, or give each its own).

The contact form sends `name`, `email`, `company`, `project` and `message`; the trade form sends `name`, `email` and `company`. A hidden `subject` tells them apart. Each form has a `botcheck` honeypot, shows "thank you" only when the server answers `success: true`, and shows the error otherwise.

**Edit**

- Colours are the variables at the top of `css/style.css` (`--bg`, `--ink`, `--sun`, `--cobalt`).
- The search list is the `products` array in `js/main.js`.
- With `prefers-reduced-motion: reduce` there is no loader, the slider does not advance on its own, and nothing drifts or spins.

**Images.** The photos were generated for this template with FLUX 1.1 [pro] ultra (Black Forest Labs) and saved as WebP. They show no people, text or logos. You may use them in your own site. Replace them with your own photos, keeping the file names.

**Font.** Poppins, served from `fonts/` (the Latin files Google Fonts serves). Licence in `fonts/OFL.txt`:

> Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
>
> This Font Software is licensed under the SIL Open Font License, Version 1.1.

**Scripts.** GSAP 3.13 (gsap, ScrollTrigger, ScrollSmoother) under GreenSock's standard no-charge license, see `js/vendor/GSAP-LICENSE.txt`.

## Українська

Односторінковий шаблон для виробника LED-освітлення. На сторінці по черзі:

- лоадер, де світло промальовує логотип і вмикається;
- шапка з «пігулкою» меню, мегаменю, пошуком і панеллю для телефона;
- слайдер на весь екран;
- картки, що рухаються з різною швидкістю під час скролу;
- стрічка проєктів, яку тягнуть убік;
- будинок із п'ятьма вимикачами зон світла;
- п'ять карток цінностей, що складаються стосом;
- темно-синій підвал.

**Форми:** замініть обидва `fk_your_access_key` в `index.html` на ключ форми з кабінету Формгонг. Форма контакту надсилає ім'я, пошту, компанію, тип проєкту й повідомлення; форма торгового доступу — ім'я, пошту та компанію.

**Картинки:** фото згенеровано для цього шаблону моделлю FLUX 1.1 [pro] ultra. Замініть їх своїми, зберігши назви файлів.

## License

MIT, see `LICENSE`. Fonts: SIL OFL 1.1. GSAP: GreenSock standard license.