# Credits: Lumen Dental Atelier (premium demo)

A premium showcase site for a **fictional** implant and aesthetic dental clinic in Split.
Every element marked `data-demo` is demo-only. Footer: "Demo stranica, izmišljen objekt.
Izradio: Brocoola".

## Hero video (`assets/video/`)

A 15.6 s seamless loop of three shots, all filmed in Split, free under the
[Pexels License](https://www.pexels.com/license/) (free for commercial use, no attribution required;
credited here anyway).

| Shot | Source | Author |
|---|---|---|
| 1. The Riva and the harbour at sunset, drone gliding in over the water | "Stunning aerial view of Split harbor at sunset", https://www.pexels.com/video/stunning-aerial-view-of-split-harbor-at-sunset-37964343/ (3840×2160) | Roger Holzberg |
| 2. Looking up into the oculus of the Vestibule, Diocletian's Palace | "Ancient Roman architecture dome skylight view", https://www.pexels.com/video/ancient-roman-architecture-dome-skylight-view-39236763/ (2546×1440, 50 fps) | Fábio Rocha |
| 3. The Riva promenade and palms from above, golden light | "Aerial view of Split's scenic seafront at sunset", https://www.pexels.com/video/aerial-view-of-split-s-scenic-seafront-at-sunset-37964350/ (3840×2160) | Roger Holzberg |

Edit (ffmpeg, graded in 16-bit RGB, lossless 10-bit FFV1 master):
- Shot 1: 7.6–13.4 s (zoomed 1.12× to keep boat masts out of frame), shot 2: 3.4–7.0 s played at
  0.6× (50 fps source at 30 fps, calmer, no frame blending), shot 3: 0.0–6.2 s.
- 1.2 s `xfade` dissolves; the loop ends by dissolving into the frames just before the start, so
  the loop point is invisible. No audio, no text.
- Grade: soft filmic curve with slightly lifted blacks, warm highlights, cool shadows, blues and
  cyans desaturated (the palace sky most), overall saturation −8 %, light temporal denoise.
- The sea in the lower part of shot 1 (and the foreground of shot 3 on the portrait cut) is given a
  soft-focus falloff. It sits under the headline gradient, looks like a long lens, and keeps the
  glittering water within the bitrate budget without blocking.
- Portrait cut for phones: 9:16 crops that follow the subject (the oculus is tracked as it drifts).

| File | Codec | Size | Bytes | VMAF vs master* |
|---|---|---|---|---|
| `hero-d.av1.mp4` | AV1 (SVT-AV1, preset 4, CRF 35) | 1920×1080 | 10 533 704 | 93.2 |
| `hero-d.hevc.mp4` | HEVC (x265 slow, CRF 27, `hvc1`) | 1920×1080 | 11 769 084 | 93.4 |
| `hero-d.h264.mp4` | H.264 High (x264 veryslow, CRF 24.3, tune film, aq-mode 3) | 1600×900 | 11 762 123 | 93.3 |
| `hero-m.av1.mp4` | AV1 (SVT-AV1, preset 4, CRF 32) | 720×1280 | 3 912 935 | 93.8 |
| `hero-m.hevc.mp4` | HEVC (x265 slow, CRF 26.7) | 720×1280 | 3 895 978 | 93.3 |
| `hero-m.h264.mp4` | H.264 High (x264 veryslow, CRF 23.4) | 540×960 | 3 910 896 | 93.1 |

\* libvmaf v0.6.1, mean over all 468 frames, against the graded master at the file's resolution.
All 8-bit 4:2:0, 30 fps, `+faststart`, keyframe every 5 s. `main.js` picks the portrait files in
portrait orientation, and AV1 where it decodes smoothly, then HEVC (Safari), then H.264.

Posters (`hero-poster-d-*`, `hero-poster-m-*`, AVIF/WebP/JPEG, each under 200 KB) are the first
frame of each master. `assets/img/og-image.jpg` (1200×630) is the desktop poster with the headline
set in the site fonts.

## Photos (`assets/img/`)

| File | Source | Author | Licence |
|---|---|---|---|
| `lamp-1600.*`, `lamp-900.*` | "White Dental Equipment Near Wall", https://www.pexels.com/photo/white-dental-equipment-near-wall-305567/ | Daniel Frank | [Pexels License](https://www.pexels.com/license/) |
| `shore-880.*`, `shore-600.*` | Still frame from "Golden Sunrise Reflection on Calm Sea Surface in Slow Motion", https://www.pexels.com/video/golden-sunrise-reflection-on-calm-sea-surface-in-slow-motion-15028197/ | Mario Krimer | [Pexels License](https://www.pexels.com/license/) |

Cropped, resized, slightly desaturated; AVIF, WebP and JPEG.

## 3D implant model

- `js/implant3d.js` is built from `src/implant-scene.js`. **All geometry is procedural** (no
  downloaded model): the implant screw is a parametric surface with a real helical thread, apex
  cutting flutes and a hex connection; the abutment is a turned profile; the molar crown is a
  superellipse profile with five cusps, fissures and an inner cavity.
- Look: a procedural photo studio (softboxes, strip lights, two rim lights) pre-filtered with PMREM,
  plus key and rim directional lights; Khronos PBR Neutral tone mapping; MSAA (supersampled on 1×
  screens, adaptive resolution if frames get slow); a real contact shadow (depth pass + blur).
- Materials (`MeshPhysicalMaterial`): glazed ceramic crown (clearcoat over a micro-textured body,
  sheen, and a small subsurface term so thin cusps and the margin glow when back-lit), gold-anodised
  abutment and machined titanium collar with anisotropic (lathe-turned) highlights, sandblasted
  threads. The scene eases towards the scroll position (critically damped), so scrubbing stays smooth.
- `assets/img/implant-assembled-*`, `implant-exploded-*` are renders of the same scene (2×
  supersampled), used as the poster before the 3D loads and as the static view (reduced motion, no
  WebGL, no JS).
- Build (only after editing the source; three@0.169.0 must be resolvable, e.g. via `NODE_PATH`):
  `npx esbuild src/implant-scene.js --bundle --minify --format=iife --target=es2019 --legal-comments=eof --outfile=js/implant3d.js`

## Libraries

| Library | Version | Licence |
|---|---|---|
| three.js (bundled in `js/implant3d.js`, with the blur shaders from its examples) | 0.169.0 | MIT, `js/LICENSE-three.txt` (the notice is also kept at the end of the bundle) |

No other libraries: scrolling, the journey line and the scroll-scrubbed 3D run on a small rAF loop
in `js/main.js` (GSAP, ScrollTrigger and Lenis were removed in this version).

## Fonts (self-hosted, `assets/fonts/`)

- **Instrument Serif** (Regular, Italic), designed by Rodrigo Fuenzalida for Instrument,
  https://github.com/Instrument/instrument-serif. Headings.
- **Inter Tight** (variable, weights 400–600), Rasmus Andersson / The Inter Project,
  https://github.com/rsms/inter-tight. Text and interface.
- Both under the [SIL Open Font License 1.1](https://openfontlicense.org) (no Reserved Font Names;
  licence texts in `assets/fonts/OFL-*.txt`). Downloaded from the google/fonts repository and
  subset with fontTools to Latin, Latin-1 and Latin Extended-A plus typographic punctuation, which
  covers Croatian (č ć đ š ž), German (ä ö ü ß) and Italian (à è é ì ò ù). Fontshare faces
  (Sentient, Switzer) were considered but not used: their licence forbids subsetting and handing the
  files to a client, which this agency workflow needs.

## Other

- **Map:** an OpenStreetMap embed (© OpenStreetMap contributors) that loads only after a click.
- **Icons, favicon, logo mark:** drawn for this site (`assets/icons/`).
- **Booking:** the live widget from `rezervacije.web-agencija.workers.dev`, tenant key
  `demo-lumen` (its own demo tenant; services and prices match this page's price list:
  CBCT consultation 90 €, online video consultation and aesthetic consultation free).
- **Invented content:** clinic name, team names and roles, reviews (marked illustrative), prices,
  the 10-year guarantee, the address (Ulica kralja Zvonimira 14 is a real street, the clinic is
  invented), phone +385 21 000 000, WhatsApp +385 91 000 0000 and lumen.atelier@example.com.
- **Brand names** (Straumann, Nobel Biocare) appear as plain text only, with no logos. They are
  trademarks of their owners.
- **HKDM rules:** no before/after images or patient "makeovers", no "cheapest" or superlative claims
  in any language. The trust elements are the written plan, materials, the timeline and starting
  prices. Structured data (`Dentist`) carries no reviews or ratings.