类型：Site模板 · 收录：2026-10-31 11:56:21 · 源码：会员可见
# Velaris hero — exact recreation prompt
Build a single page, `index.html`, that reproduces the Velaris hero exactly: a dark cybersecurity landing hero with a WebGL particle globe behind a light three-line headline, a sticky 300vh scroll stage that bursts the globe and swaps the headline for a second statement with a blue CTA. Everything below is exact. Do not substitute, simplify or "improve" anything.
---
## 1. Assets
### 1a. The globe module (required, it IS the hero)
Get the file from this URL and save it as `hero.js` in the same folder as `index.html`:
```
https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/aaaf/velaris-hero.js
```
```bash
curl -L -o hero.js https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/aaaf/velaris-hero.js
```
If you cannot run a shell, fetch the URL's contents and write them to `hero.js` verbatim (62,400 bytes). The page must import it locally as `./hero.js`. Do not point the `import` at the URL itself: the host serves it as `application/octet-stream`, which browsers refuse for ES modules, and the bucket does not send CORS headers.
Facts about it: 62,400 bytes, an ES module, exports one function `mountBynarHero(container, { scrollLength, onReady })`. It imports `three` as a bare specifier (resolved by the import map in 1b) and dynamically imports `EffectComposer`, `RenderPass`, `UnrealBloomPass` and `GPUComputationRenderer` from `https://esm.sh/three@0.184.0/examples/jsm/...` on its own. Do not edit it, do not inline it, do not rewrite it, do not replace it with CSS, SVG, a hand-written canvas or a different library.
What the module renders inside the container it is given (so you can verify it): a WebGL canvas plus a 2D overlay canvas, both absolutely positioned, filling the container.
- A sphere of ~2,000 GPU-simulated additive points, base colour `rgb(128,153,255)` with glow colour `rgb(179,204,255)`, radius 0.85 world units, point size 0.012, with slow noise displacement (amount 0.06, speed 0.15, scale 2.0) and visibility noise (scale 1.8, speed 0.08, threshold 0.25) so clusters fade in and out.
- A faint wireframe shell: icosahedron radius 1.005, detail 5, colour `rgb(140,166,242)`, ghost opacity 0.04, depth falloff 0.8, pulse opacity 0.25.
- A thin glow rim on the sphere (glow colour `rgb(140,166,242)`, brightness 0.1).
- Two red "vulnerability" clusters, colour `rgb(255,38,26)`, centred on directions (-0.6, -0.5, 0.6) and (0.7, 0.4, 0.5), angular radius 0.45, spread 0.25.
- A scan wave every 3 s, alternating from the top pole (0, 1, 0.3) and bottom pole (0, -1, 0.3), speed 0.9 units/s, ring width 0.12, intensity 2, max radius 3.5, then a 1 s rest.
- Whole group rotation: `rotation.y = time * 0.06`, `rotation.x = time * 0.018` radians.
- Camera: perspective 75°, starts at z = 2.8 (scaled up to 1.7x on narrow viewports so the globe stays in frame).
- Bloom: UnrealBloomPass strength 2.5, radius 0.5, threshold 0.1; ACES filmic tone mapping, exposure 1.
- Hover (desktop only): a hidden sphere of radius 1.15 is raycast; while hovered, points within radius 0.8 brighten and a glow follows the cursor.
- Code fragments on the 2D overlay: monospace, 4 px at reference sphere radius 350 px (scales with the globe's screen size), base colour `rgba(160,180,220)`, alpha 0.65, parallax 8 px with the mouse. Up to 4 visible at once, each shown 3–6 s then hidden 3–7 s, characters typed in at 60 chars/s with a 0.3 s flicker on appear. They anchor to 8 fixed directions on the sphere and sit to the left or right of the projected point. The fragments, verbatim, with per-line colours (crit `rgb(255,90,90)`, warn `rgb(255,200,80)`, warn2 `rgb(255,214,150)`, dim `rgb(100,120,160)`, normal `rgb(160,180,220)`):
1. `BUG: KASAN: use-after-free` (crit) / `in fuse_emit+0x428/0x860` / blank / `Write of size 4120 at` (crit) / `addr ffff0000c2e77000 by task poc/88` (dim)
2. `==64013==ERROR: AddressSanitizer` (crit) / `heap-buffer-overflow on address 0xebf7c7815ad0` (crit) / `at pc 0xede7c8a67f5c` (dim) / blank / `READ of size 4294967295` (warn) / `at 0xebf7c7815ad0 thread T0` (dim)
3. `==119314== Memcheck, a memory error detector` (warn2) / `==119314== Invalid read of size 1` (warn)
4. `push %rbp` / `mov %rsp,%rbp` / `call 0xffffffff81004580`
5. `stp x29, x30, [sp, #-16]!` / `mov x29, sp` / `ldr x0, [x19, #...]`
and further assembly and sanitizer snippets in the same style.
- Scroll burst, driven by `scrollLength` (percent of viewport height, measured from the container's top): as progress p goes 0→1 the camera dollies from z 2.8 to z 1 (eased over p 0→0.7), a "hole" opens in the particle sphere facing the camera (hole scale up to 0.55 over p 0.15→0.8, push strength 4→7), points vortex (speed up to 1.5) and explode (strength up to 0.2), the point layer fades out over p 0.3→0.55, the shell's back faces fade in to 0.5 and its ghost opacity rises 0.04→0.15 over p 0.3→0.6, and the glow rim fades out over p 0.5→0.8. The result is the viewer flying through the sphere into a huge wireframe cage with bright arcs at the edges.
- On its first rendered frame it sets `window.__bynarReady.hero = true` and dispatches `bynar:ready` on `window`. It observes the container for resizes.
### 1b. three.js
Import map, in `<head>` before any module script:
```html
<script type="importmap">
{ "imports": { "three": "https://esm.sh/three@0.184.0/es2022/three.mjs" } }
</script>
```
### 1c. Fonts (Google Fonts)
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@300;400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
```
Zalando Sans 300 for headlines and body, 400 for the logo. JetBrains Mono 400/500 for nav, buttons.
No images, no video, no other assets. Serve over http (`python3 -m http.server`); ES modules do not run from `file://`.
---
## 2. Head
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Velaris | Autonomous Exposure Validation & Repair</title>
<!-- preconnects + font link from 1c -->
<!-- import map from 1b -->
<style> ... section 3 ... </style>
</head>
```
---
## 3. CSS
The complete stylesheet (tokens, stage, nav, scroll stage, type scale, entrance animation, breakpoints) is in the "HTML Code" section of this listing. Use it verbatim.
---
## 4. Body
The exact markup is in the "HTML Code" section. Structure, in order: fixed `.stage#hero-bg` (with `.floor` inside) → fixed `header.nav` (logo, five links, "Book a demo" button) → `main.scroller` (300vh) containing `.sticky` with the hero panel (`h1`), the subtitle `p.sub`, and the second panel (`#approach`: two `h2` + `.cta`) → the scroll script → the module script that mounts `hero.js`.
Copy, verbatim (character counts matter, nothing may reflow):
- Logo: `VEL` + blue triangle + `RIS`
- Nav: How it works · Use cases · Insights · Field notes · Company
- Header button: Book a demo
- Headline, three forced lines: `Defense that adapts` / `faster than exploits can` / `surface.`
- Subtitle: `Continuously locating, proving, and closing reachable weaknesses across your cloud estate, applications, and third-party dependency chains.`
- Statement 1: `Fix the flaws an attacker would use.`
- Statement 2: `We prove which weaknesses are reachable autonomously, at scale, before attacks.`
- CTA: `Book a demo →`
---
## 5. Scroll script
In the "HTML Code" section. Behaviour: on scroll and resize, compute `t = clamp(scrollY / (scroller height - innerHeight), 0, 1)`; when `t > 0.42` the hero panel gets `out`, the second panel gets `in` and `aria-hidden="false"`, the subtitle gets `out`, and `body` gets `scrolled`; below 0.42 everything reverts.
---
## 6. Animation timeline
| What | Starts | Duration | Easing |
| --- | --- | --- | --- |
| Globe fades/forms in (inside hero.js, after its addons load) | ~0.3–1.0 s after load | ~1 s | module's own |
| h1 opacity 0→1 | 200 ms | 1200 ms | cubic-bezier(.2,.7,.2,1) |
| Subtitle opacity 0→1 | 600 ms | 1200 ms | same |
| Globe rotation | continuous | y: 0.06 rad/s, x: 0.018 rad/s | linear |
| Scan wave | every 3 s, alternating poles | ~1 s travel + 1 s rest | module's own |
| Code fragments | continuous | show 3–6 s, hide 3–7 s, max 4 visible | typed at 60 cps |
| Scroll 0→200vh | user | globe burst as in 1a | module's own |
| Text swap at scroll progress 0.42 | user | panels: opacity+scale .5s; subtitle opacity .5s | ease |
| Hover: nav links opacity .7, header button bg → #fff (.2s), CTA glow box-shadow (.3s) | hover | | |
Scroll geometry: the scroller is 300vh, so max scroll = 200vh. `scrollLength: 200` makes the module's burst reach 100% exactly at the bottom. The text flip happens at 42% of that (≈84vh scrolled).
---
## 7. Responsive
- ≤720px: nav links hidden (logo and button stay), subtitle bottom 8vh, h1 `clamp(40px,12vw,64px)`. The module scales the camera back on narrow viewports so the globe stays fully in frame.
- `prefers-reduced-motion: reduce`: entrance animations off, elements shown immediately. (The globe keeps rendering.)
---
## 8. Acceptance
- [ ] `hero.js` downloaded from the URL in 1a (62,400 bytes), sitting next to `index.html`, imported as `./hero.js`. If the background is plain black the module did not mount: check the import map, that the page is served over http, and the console.
- [ ] Within ~1.5 s: bloomed blue particle sphere centred behind the headline, faint wireframe shell, two red clusters, a scan wave every 3 s, code fragments flickering left and right of the globe, blue glow at the bottom of the viewport.
- [ ] Headline is Zalando Sans 300, three lines, ~96px at 1440 wide, ~64px at 375 wide.
- [ ] Nav: VEL▲RIS, five mono uppercase links, light "Book a demo" button.
- [ ] Scrolling to the bottom flies through the globe into a huge wireframe cage; headline and subtitle fade; two statements and the blue "Book a demo →" button fade in with a slight scale.
- [ ] Scrolling back up restores the hero.
- [ ] Only Google Fonts and esm.sh are external; no 4xx/5xx; no console errors.