mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 23:03:09 +00:00
ukimsanov
6ff6601dd0
My generator rebuild replaced the '## Related topics' section (still required by docs/AGENTS.md) with the provenance footer, dropping it from all 168 generated Catalog pages. Emit it again as the final section so pages end with it, and stop carriedSectionsFrom() breaking at the footer marker so a human section appended below the generated tail survives a regeneration. Adds a per-page regeneration assertion so a future drop fails CI. Flagged by Magi (P1) and Rames.
50 lines
1.7 KiB
Plaintext
50 lines
1.7 KiB
Plaintext
---
|
||
title: "iOS 26 Liquid Glass Home Screen"
|
||
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
|
||
---
|
||
|
||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||
|
||
## Install
|
||
|
||
```bash Terminal
|
||
npx hyperframes add ios26-liquid-glass
|
||
```
|
||
|
||
That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files under `models/`, `lib/`, and `assets/icons/`.
|
||
|
||
<Warning>
|
||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||
Rendering from the CLI switches it on for you. [How it
|
||
works](/guides/html-in-canvas)
|
||
</Warning>
|
||
|
||
## Add it to your video
|
||
|
||
It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
||
|
||
```html index.html
|
||
<div
|
||
data-composition-id="ios26-liquid-glass"
|
||
data-composition-src="compositions/ios26-liquid-glass.html"
|
||
data-start="0"
|
||
data-duration="15"
|
||
data-track-index="1"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
></div>
|
||
```
|
||
|
||
Move it in time with `data-start`. Put it on a different timeline row with
|
||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||
|
||
{/* hf:generated-footer */}
|
||
|
||
Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`.
|
||
|
||
## Related topics
|
||
|
||
- [Browse the complete Catalog](/catalog)
|
||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||
- [Build a richer composition](/go-further)
|