mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 12:08:50 +00:00
feat(registry): polish Liquid Glass catalog blocks
This commit is contained in:
Miguel Ángel
+7
-1
@@ -4,5 +4,11 @@
|
||||
"correctness": "error"
|
||||
},
|
||||
"plugins": ["react", "typescript"],
|
||||
"ignorePatterns": ["dist/", "coverage/", "node_modules/", "playground/"]
|
||||
"ignorePatterns": [
|
||||
"dist/",
|
||||
"coverage/",
|
||||
"node_modules/",
|
||||
"playground/",
|
||||
"registry/blocks/**/lib/*.iife.js"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "iOS 26 Liquid Glass Home Screen"
|
||||
description: "3D iPhone with pixel-perfect iOS 26 home screen featuring liquid glass app icons, status bar, dock, and search pill — rendered via WebGPU glass shaders on a layoutsubtree canvas mapped to a GLTF device model."
|
||||
---
|
||||
|
||||
# iOS 26 Liquid Glass Home Screen
|
||||
|
||||
3D iPhone with pixel-perfect iOS 26 home screen featuring liquid glass app icons, status bar, dock, and search pill — rendered via WebGPU glass shaders on a layoutsubtree canvas mapped to a GLTF device model.
|
||||
|
||||
`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `gltf` `html-in-canvas`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Liquid Glass Context Menu"
|
||||
description: "Frosted glass context menu panel drifting over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Context Menu
|
||||
|
||||
Frosted glass context menu panel drifting over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-context-menu" data-composition-src="compositions/liquid-glass-context-menu.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Liquid Glass Media Controls"
|
||||
description: "Frosted glass media control panels spreading over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Media Controls
|
||||
|
||||
Frosted glass media control panels spreading over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-media-controls" data-composition-src="compositions/liquid-glass-media-controls.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Liquid Glass Notification"
|
||||
description: "Frosted glass notification cards floating over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Notification
|
||||
|
||||
Frosted glass notification cards floating over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-notification
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-notification" data-composition-src="compositions/liquid-glass-notification.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Liquid Glass Widgets"
|
||||
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Widgets
|
||||
|
||||
Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-widgets
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-widgets" data-composition-src="compositions/liquid-glass-widgets.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: "macOS Tahoe Liquid Glass Desktop"
|
||||
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
|
||||
---
|
||||
|
||||
# macOS Tahoe Liquid Glass Desktop
|
||||
|
||||
3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
|
||||
|
||||
`html-in-canvas` `3d` `macos` `tahoe` `gltf`
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<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/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
@@ -129,6 +129,12 @@
|
||||
{
|
||||
"group": "HTML-in-Canvas",
|
||||
"pages": [
|
||||
"catalog/blocks/ios26-liquid-glass",
|
||||
"catalog/blocks/liquid-glass-context-menu",
|
||||
"catalog/blocks/liquid-glass-media-controls",
|
||||
"catalog/blocks/liquid-glass-notification",
|
||||
"catalog/blocks/liquid-glass-widgets",
|
||||
"catalog/blocks/macos-tahoe-liquid-glass",
|
||||
"catalog/blocks/vfx-iphone-device",
|
||||
"catalog/blocks/vfx-liquid-background",
|
||||
"catalog/blocks/vfx-liquid-glass",
|
||||
|
||||
@@ -427,6 +427,23 @@
|
||||
"href": "/catalog/blocks/instagram-follow",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
|
||||
},
|
||||
{
|
||||
"name": "ios26-liquid-glass",
|
||||
"type": "block",
|
||||
"title": "iOS 26 Liquid Glass Home Screen",
|
||||
"description": "3D iPhone with pixel-perfect iOS 26 home screen featuring liquid glass app icons, status bar, dock, and search pill — rendered via WebGPU glass shaders on a layoutsubtree canvas mapped to a GLTF device model.",
|
||||
"tags": [
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu",
|
||||
"3d",
|
||||
"iphone",
|
||||
"ios26",
|
||||
"gltf",
|
||||
"html-in-canvas"
|
||||
],
|
||||
"href": "/catalog/blocks/ios26-liquid-glass",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
|
||||
},
|
||||
{
|
||||
"name": "light-leak",
|
||||
"type": "block",
|
||||
@@ -439,6 +456,58 @@
|
||||
"href": "/catalog/blocks/light-leak",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-context-menu",
|
||||
"type": "block",
|
||||
"title": "Liquid Glass Context Menu",
|
||||
"description": "Frosted glass context menu panel drifting over an aurora shader background",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu"
|
||||
],
|
||||
"href": "/catalog/blocks/liquid-glass-context-menu",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-media-controls",
|
||||
"type": "block",
|
||||
"title": "Liquid Glass Media Controls",
|
||||
"description": "Frosted glass media control panels spreading over an aurora shader background",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu"
|
||||
],
|
||||
"href": "/catalog/blocks/liquid-glass-media-controls",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-notification",
|
||||
"type": "block",
|
||||
"title": "Liquid Glass Notification",
|
||||
"description": "Frosted glass notification cards floating over an aurora shader background",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu"
|
||||
],
|
||||
"href": "/catalog/blocks/liquid-glass-notification",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-widgets",
|
||||
"type": "block",
|
||||
"title": "Liquid Glass Widgets",
|
||||
"description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu"
|
||||
],
|
||||
"href": "/catalog/blocks/liquid-glass-widgets",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
|
||||
},
|
||||
{
|
||||
"name": "logo-outro",
|
||||
"type": "block",
|
||||
@@ -465,6 +534,21 @@
|
||||
"href": "/catalog/blocks/macos-notification",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
|
||||
},
|
||||
{
|
||||
"name": "macos-tahoe-liquid-glass",
|
||||
"type": "block",
|
||||
"title": "macOS Tahoe Liquid Glass Desktop",
|
||||
"description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
|
||||
"tags": [
|
||||
"html-in-canvas",
|
||||
"3d",
|
||||
"macos",
|
||||
"tahoe",
|
||||
"gltf"
|
||||
],
|
||||
"href": "/catalog/blocks/macos-tahoe-liquid-glass",
|
||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
|
||||
},
|
||||
{
|
||||
"name": "north-korea-locked-down",
|
||||
"type": "block",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
+391
-186
@@ -25,6 +25,197 @@
|
||||
overflow: hidden;
|
||||
background: #050508;
|
||||
}
|
||||
.ios-home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 844px;
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, rgba(126, 87, 255, 0.32), transparent 28%),
|
||||
radial-gradient(circle at 82% 20%, rgba(0, 199, 255, 0.28), transparent 26%),
|
||||
radial-gradient(circle at 50% 86%, rgba(255, 126, 80, 0.24), transparent 28%),
|
||||
linear-gradient(145deg, #070811 0%, #101421 46%, #05070d 100%);
|
||||
}
|
||||
.ios-app-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px 6px;
|
||||
padding: 8px 18px 4px;
|
||||
}
|
||||
.ios-app {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.ios-app-icon,
|
||||
.ios-dock-icon {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
box-shadow:
|
||||
0 8px 20px rgba(0, 0, 0, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
}
|
||||
.ios-app-icon {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin: 0 auto 3px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.ios-app-label {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
font-size: 9px;
|
||||
line-height: 1.1;
|
||||
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ios-badge {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: 2px;
|
||||
min-width: 13px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 8px;
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 7px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
.ios-search-pill {
|
||||
justify-self: center;
|
||||
width: 104px;
|
||||
padding: 7px 0;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.ios-liquid-stack {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
gap: 8px;
|
||||
padding: 6px 16px 8px;
|
||||
}
|
||||
.ios-glass-card {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
|
||||
rgba(28, 35, 52, 0.48);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.34),
|
||||
0 14px 36px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.ios-glass-notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 58px;
|
||||
padding: 9px 11px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.ios-glass-notification img {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
object-fit: cover;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ios-notification-copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.ios-notification-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
.ios-notification-body {
|
||||
margin-top: 2px;
|
||||
color: rgba(255, 255, 255, 0.64);
|
||||
font-size: 10px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.ios-widget-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.ios-widget {
|
||||
min-height: 82px;
|
||||
padding: 11px 12px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.ios-widget-label {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.ios-widget-value {
|
||||
margin-top: 5px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 820;
|
||||
line-height: 1;
|
||||
}
|
||||
.ios-widget-caption {
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ios-control-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 7px;
|
||||
min-height: 52px;
|
||||
padding: 8px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.ios-toggle {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 36px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
font-size: 15px;
|
||||
font-weight: 820;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.ios-toggle.active {
|
||||
background: linear-gradient(135deg, rgba(88, 166, 255, 0.9), rgba(52, 211, 153, 0.72));
|
||||
}
|
||||
.ios-dock {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin: 0 12px 12px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.13);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||
0 14px 36px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.ios-dock-item {
|
||||
position: relative;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
.ios-dock-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -63,38 +254,132 @@
|
||||
color: #e2e8f0;
|
||||
"
|
||||
>
|
||||
<div id="phone-scroll" style="background:#0a0a0f;color:#fff;transform:translateY(0)">
|
||||
<div id="phone-title" style="display:none"></div><span id="phone-count" style="display:none"></span><div id="phone-cards" style="display:none"></div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;font-size:14px;font-weight:700;"><span style="font-variant-numeric:tabular-nums;">15:16</span><div style="display:flex;gap:5px;align-items:center;font-size:11px;"><span>●●●●</span><span>📶</span><span style="color:#30d158;font-weight:600;">92%🔋</span></div></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;padding:10px 18px;">
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">☁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Weather</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📈</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Stocks</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📡</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Find My</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">🏠</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Home</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📖</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Books</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⭐</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">iTunes</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⊙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Fitness</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⏱</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Watch</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">👤</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Contacts</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📁</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Files</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;">文A</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Translate</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">⚙</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Utilities</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✦</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">ChatGPT</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;">#</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Slack</div></div>
|
||||
<div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">📷</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">1</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Instagram</div></div>
|
||||
<div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;">𝕏</div><div style="position:absolute;top:-2px;right:4px;background:#FF3B30;color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:7px;">4</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">X</div></div>
|
||||
<div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:24px;">✉</div><div style="position:absolute;top:-2px;right:0;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">797</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Proton</div></div>
|
||||
<div style="text-align:center;position:relative"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;">M</div><div style="position:absolute;top:-2px;right:-2px;background:#FF3B30;color:#fff;font-size:6px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">31.889</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Gmail</div></div>
|
||||
<div style="text-align:center"><div style="width:62px;height:62px;margin:0 auto 3px;border-radius:15px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;">R</div><div style="font-size:9px;color:rgba(255,255,255,0.7);">Revolut</div></div>
|
||||
<div id="phone-scroll" class="ios-home" style="color: #fff; transform: translateY(0)">
|
||||
<div id="phone-title" style="display: none"></div>
|
||||
<span id="phone-count" style="display: none"></span>
|
||||
<div id="phone-cards" style="display: none"></div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 22px 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
"
|
||||
>
|
||||
<span style="font-variant-numeric: tabular-nums">15:16</span>
|
||||
<div style="display: flex; gap: 5px; align-items: center; font-size: 11px">
|
||||
<span>●●●●</span><span>5G</span
|
||||
><span style="color: #30d158; font-weight: 600">92%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ios-app-grid" class="ios-app-grid">
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/weather.jpg" alt="" />
|
||||
<div class="ios-app-label">Weather</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/stocks.jpg" alt="" />
|
||||
<div class="ios-app-label">Stocks</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/find-my.jpg" alt="" />
|
||||
<div class="ios-app-label">Find My</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/home.jpg" alt="" />
|
||||
<div class="ios-app-label">Home</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/books.jpg" alt="" />
|
||||
<div class="ios-app-label">Books</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/itunes-store.jpg" alt="" />
|
||||
<div class="ios-app-label">iTunes</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/fitness.jpg" alt="" />
|
||||
<div class="ios-app-label">Fitness</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/watch.jpg" alt="" />
|
||||
<div class="ios-app-label">Watch</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/contacts.jpg" alt="" />
|
||||
<div class="ios-app-label">Contacts</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/files.jpg" alt="" />
|
||||
<div class="ios-app-label">Files</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/translate.jpg" alt="" />
|
||||
<div class="ios-app-label">Translate</div>
|
||||
</div>
|
||||
<div class="ios-app">
|
||||
<img class="ios-app-icon" src="assets/icons/calendar.jpg" alt="" />
|
||||
<div class="ios-app-label">Calendar</div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:center;padding:6px 0 10px;"><div style="padding:7px 24px;border-radius:16px;background:rgba(120,120,130,0.25);font-size:12px;color:rgba(255,255,255,0.45);font-weight:500;">🔍 Search</div></div>
|
||||
<div style="margin:0 12px;padding:8px 12px;border-radius:24px;background:rgba(80,80,90,0.35);display:flex;justify-content:space-around;">
|
||||
<div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">📞</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;">9+</div></div>
|
||||
<div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🦁</div></div>
|
||||
<div style="position:relative"><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">💬</div><div style="position:absolute;top:-3px;right:-3px;background:#FF3B30;color:#fff;font-size:7px;font-weight:700;padding:1px 3px;border-radius:7px;font-variant-numeric:tabular-nums;">282</div></div>
|
||||
<div><div style="width:52px;height:52px;border-radius:13px;background:rgba(120,120,130,0.35);display:flex;align-items:center;justify-content:center;font-size:22px;">🎵</div></div>
|
||||
</div>
|
||||
|
||||
<div class="ios-liquid-stack">
|
||||
<div id="ios-notification-a" class="ios-glass-card ios-glass-notification">
|
||||
<img src="assets/icons/notify-messages.jpg" alt="" />
|
||||
<div class="ios-notification-copy">
|
||||
<div class="ios-notification-title"><span>Messages</span><span>now</span></div>
|
||||
<div class="ios-notification-body">Liquid glass preview is ready for review.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ios-notification-b" class="ios-glass-card ios-glass-notification">
|
||||
<img src="assets/icons/slack.jpg" alt="" />
|
||||
<div class="ios-notification-copy">
|
||||
<div class="ios-notification-title"><span>HyperFrames</span><span>1m</span></div>
|
||||
<div class="ios-notification-body">
|
||||
Rendering with one worker. Browser proof attached.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ios-widget-row">
|
||||
<div id="ios-live-widget" class="ios-glass-card ios-widget">
|
||||
<div class="ios-widget-label">Live activity</div>
|
||||
<div class="ios-widget-value">92%</div>
|
||||
<div class="ios-widget-caption">Frames encoded without dropped captures.</div>
|
||||
</div>
|
||||
<div id="ios-music-widget" class="ios-glass-card ios-widget">
|
||||
<div class="ios-widget-label">Now playing</div>
|
||||
<div class="ios-widget-value">Glass</div>
|
||||
<div class="ios-widget-caption">Aurora shader mix · spatial preview</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ios-control-strip" class="ios-glass-card ios-control-strip">
|
||||
<div class="ios-toggle active">Wi-Fi</div>
|
||||
<div class="ios-toggle active">5G</div>
|
||||
<div class="ios-toggle">Focus</div>
|
||||
<div class="ios-toggle">Air</div>
|
||||
</div>
|
||||
<div class="ios-search-pill">Search</div>
|
||||
</div>
|
||||
|
||||
<div id="ios-real-dock" class="ios-dock">
|
||||
<div class="ios-dock-item">
|
||||
<img class="ios-dock-icon" src="assets/icons/phone.jpg" alt="" />
|
||||
<span class="ios-badge">9+</span>
|
||||
</div>
|
||||
<div class="ios-dock-item">
|
||||
<img class="ios-dock-icon" src="assets/icons/brave.jpg" alt="" />
|
||||
</div>
|
||||
<div class="ios-dock-item">
|
||||
<img class="ios-dock-icon" src="assets/icons/messages.jpg" alt="" />
|
||||
<span class="ios-badge">282</span>
|
||||
</div>
|
||||
<div class="ios-dock-item">
|
||||
<img class="ios-dock-icon" src="assets/icons/music.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</canvas>
|
||||
|
||||
@@ -280,31 +565,31 @@
|
||||
eT.dispose();
|
||||
pm.dispose();
|
||||
|
||||
// ── Background ─────────────────────────────────────────────────────
|
||||
scene.add(
|
||||
new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(22, 14),
|
||||
// ── Three.js shader backdrop ────────────────────────────────────────
|
||||
var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
|
||||
var bgPlane = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(28, 16),
|
||||
new THREE.ShaderMaterial({
|
||||
uniforms: {},
|
||||
uniforms: bgUniforms,
|
||||
vertexShader:
|
||||
"varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
|
||||
fragmentShader:
|
||||
"varying vec2 v;void main(){vec3 c=vec3(0.02,0.02,0.03);c+=vec3(0.05,0.02,0.1)*exp(-pow(length(v-vec2(0.3,0.55)),2.0)*5.0);c+=vec3(0.02,0.05,0.1)*exp(-pow(length(v-vec2(0.7,0.45)),2.0)*5.0);gl_FragColor=vec4(c,1.0);}",
|
||||
"uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
}),
|
||||
),
|
||||
).position.z = -6;
|
||||
);
|
||||
bgPlane.position.z = -7.5;
|
||||
scene.add(bgPlane);
|
||||
|
||||
// Vibrant aurora-colored floor
|
||||
var floor = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(30, 30),
|
||||
new THREE.MeshStandardMaterial({ color: 0x0a1530, metalness: 0.8, roughness: 0.25 }),
|
||||
new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.86, roughness: 0.22 }),
|
||||
);
|
||||
floor.rotation.x = -PI / 2;
|
||||
floor.position.y = -2.5;
|
||||
scene.add(floor);
|
||||
// Aurora-tinted background
|
||||
scene.background = new THREE.Color(0x0c0a20);
|
||||
|
||||
scene.add(new THREE.AmbientLight(0x222233, 0.5));
|
||||
var kL = new THREE.DirectionalLight(0xffffff, 2.2);
|
||||
@@ -321,12 +606,10 @@
|
||||
var capPhoneCvs = document.getElementById("cap-phone");
|
||||
var capPhoneCtx = capPhoneCvs.getContext("2d");
|
||||
var phoneHtmlEl = document.getElementById("phone-html");
|
||||
var phoneScrollEl = document.getElementById("phone-scroll");
|
||||
|
||||
var capLapCvs = document.getElementById("cap-laptop");
|
||||
var capLapCtx = capLapCvs.getContext("2d");
|
||||
var lapHtmlEl = document.getElementById("laptop-html");
|
||||
var lapScrollEl = document.getElementById("laptop-scroll");
|
||||
|
||||
var apiOk = (function () {
|
||||
var tc = document.createElement("canvas");
|
||||
@@ -337,6 +620,38 @@
|
||||
})();
|
||||
var paintReady = false;
|
||||
|
||||
function waitForImages() {
|
||||
var images = Array.prototype.slice.call(document.querySelectorAll("img"));
|
||||
return Promise.all(
|
||||
images.map(function (image) {
|
||||
if (image.complete) return Promise.resolve();
|
||||
return new Promise(function (resolveImage) {
|
||||
image.onload = resolveImage;
|
||||
image.onerror = resolveImage;
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function waitForPaint(canvas) {
|
||||
return new Promise(function (resolvePaint) {
|
||||
if (!canvas || typeof canvas.requestPaint !== "function") {
|
||||
resolvePaint();
|
||||
return;
|
||||
}
|
||||
var resolved = false;
|
||||
function done() {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
canvas.onpaint = null;
|
||||
resolvePaint();
|
||||
}
|
||||
canvas.onpaint = done;
|
||||
canvas.requestPaint();
|
||||
setTimeout(done, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Generate card HTML for both screens
|
||||
var cardData = [
|
||||
{
|
||||
@@ -464,36 +779,6 @@
|
||||
var loader = new THREE.GLTFLoader();
|
||||
loader.setDRACOLoader(draco);
|
||||
|
||||
// ── Morphing Glass Lens (single, shared between devices) ───────────
|
||||
var glassMat = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xffffff,
|
||||
metalness: 0,
|
||||
roughness: 0.02,
|
||||
transmission: 1,
|
||||
thickness: 1.8,
|
||||
ior: 1.45,
|
||||
attenuationColor: new THREE.Color(0xe8f4ff),
|
||||
attenuationDistance: 10,
|
||||
clearcoat: 1,
|
||||
clearcoatRoughness: 0.03,
|
||||
specularIntensity: 1,
|
||||
envMapIntensity: 2.5,
|
||||
transparent: true,
|
||||
opacity: 0.85,
|
||||
side: THREE.DoubleSide,
|
||||
});
|
||||
|
||||
var glassGeos = [
|
||||
new THREE.SphereGeometry(0.22, 32, 32),
|
||||
new THREE.IcosahedronGeometry(0.22, 1),
|
||||
new THREE.OctahedronGeometry(0.25, 0),
|
||||
new THREE.DodecahedronGeometry(0.22, 0),
|
||||
new THREE.TetrahedronGeometry(0.28, 0),
|
||||
new THREE.TorusGeometry(0.16, 0.07, 16, 32),
|
||||
];
|
||||
var glassLens = new THREE.Mesh(glassGeos[0], glassMat);
|
||||
glassLens.renderOrder = 10;
|
||||
|
||||
// iPhone
|
||||
loader.load("models/iphone.glb", function (gltf) {
|
||||
var m = gltf.scene;
|
||||
@@ -509,77 +794,20 @@
|
||||
child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
|
||||
}
|
||||
});
|
||||
glassLens.visible = false; // disabled — iOS 26 doesn't use the morphing lens
|
||||
// glassLens removed
|
||||
|
||||
phoneGrp.add(m);
|
||||
ready++;
|
||||
if (ready === 2) onReady();
|
||||
});
|
||||
|
||||
// MacBook
|
||||
loader.load("models/macbook.glb", function (gltf) {
|
||||
var m = gltf.scene;
|
||||
var box = new THREE.Box3().setFromObject(m);
|
||||
var sz = box.getSize(new THREE.Vector3());
|
||||
var s = 4.5 / Math.max(sz.x, sz.z);
|
||||
m.scale.setScalar(s);
|
||||
box.setFromObject(m);
|
||||
m.position.sub(box.getCenter(new THREE.Vector3()));
|
||||
|
||||
m.traverse(function (child) {
|
||||
if (child.isMesh && (child.name === "matte" || child.name === "Matte")) {
|
||||
child.material = new THREE.MeshBasicMaterial({ map: lapTex });
|
||||
}
|
||||
});
|
||||
|
||||
// Apple logo on back of lid — exact coords from model inspection:
|
||||
// back mesh center: (0, 0.04, -1.54), matte center: (0, 0.15, -1.56)
|
||||
// Back surface faces -Z. Logo at z = -1.63 (outside back surface), facing -Z.
|
||||
var lc = document.createElement("canvas");
|
||||
lc.width = 256;
|
||||
lc.height = 256;
|
||||
var lx = lc.getContext("2d");
|
||||
lx.clearRect(0, 0, 256, 256);
|
||||
lx.save();
|
||||
lx.translate(128, 128);
|
||||
lx.scale(11, 11);
|
||||
lx.translate(-12, -13);
|
||||
lx.fillStyle = "#b8b8bc";
|
||||
lx.fill(
|
||||
new Path2D(
|
||||
"M18.71,19.5C17.88,20.49 17,21.4 15.66,21.42C14.29,21.45 13.73,20.56 12.18,20.56C10.63,20.56 9.99,21.4 8.74,21.45C7.44,21.5 6.47,20.36 5.62,19.39C3.89,17.39 2.59,13.78 4.37,11.37C5.25,10.17 6.61,9.42 8.08,9.4C9.4,9.37 10.62,10.35 11.43,10.35C12.24,10.35 13.72,9.17 15.32,9.35C15.98,9.38 17.66,9.61 18.72,11.17C18.62,11.23 16.39,12.52 16.42,15.19C16.45,18.37 19.18,19.35 19.21,19.36ZM15.23,7.7C15.96,6.82 16.43,5.6 16.31,4.38C15.25,4.42 13.97,5.09 13.22,5.96C12.55,6.74 11.98,7.99 12.12,9.18C13.29,9.27 14.5,8.57 15.23,7.7Z",
|
||||
),
|
||||
);
|
||||
lx.restore();
|
||||
var logoTex = new THREE.CanvasTexture(lc);
|
||||
logoTex.minFilter = THREE.LinearFilter;
|
||||
var appleLogoMesh = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(0.55, 0.55),
|
||||
new THREE.MeshBasicMaterial({
|
||||
map: logoTex,
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
side: THREE.DoubleSide,
|
||||
}),
|
||||
);
|
||||
appleLogoMesh.position.set(0, 0.1, -1.63);
|
||||
appleLogoMesh.rotation.y = PI;
|
||||
m.add(appleLogoMesh);
|
||||
|
||||
lapGrp.add(m);
|
||||
ready++;
|
||||
if (ready === 2) onReady();
|
||||
if (ready === 1) onReady();
|
||||
});
|
||||
|
||||
function onReady() {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
waitForImages()
|
||||
.then(function () {
|
||||
return waitForPaint(capPhoneCvs);
|
||||
})
|
||||
.then(function () {
|
||||
paintReady = true;
|
||||
captureScreens();
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["ios26-liquid-glass"] = tl;
|
||||
});
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -625,17 +853,18 @@
|
||||
lpRY: 0,
|
||||
lpRZ: 0,
|
||||
cX: 0,
|
||||
cY: 0.15,
|
||||
cZ: 1.6,
|
||||
cY: 0.18,
|
||||
cZ: 6.15,
|
||||
clX: 0,
|
||||
clY: 0.1,
|
||||
clZ: 0,
|
||||
drift: 0,
|
||||
turn: 0,
|
||||
scroll: 0,
|
||||
cardReveal: 0,
|
||||
titleFade: 0,
|
||||
counter: 0,
|
||||
iosAlert: 0,
|
||||
iosPanel: 0,
|
||||
p: 0,
|
||||
};
|
||||
|
||||
@@ -657,9 +886,21 @@
|
||||
allCards[ci2].style.opacity = cardProgress;
|
||||
allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
|
||||
}
|
||||
// Scroll
|
||||
phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
|
||||
lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
|
||||
var n1 = document.getElementById("ios-notification-a");
|
||||
var n2 = document.getElementById("ios-notification-b");
|
||||
var ctl = document.getElementById("ios-control-strip");
|
||||
if (n1) {
|
||||
n1.style.opacity = 0.42 + S.iosAlert * 0.58;
|
||||
n1.style.transform = "translateY(" + (1 - S.iosAlert) * 10 + "px)";
|
||||
}
|
||||
if (n2) {
|
||||
n2.style.opacity = 0.35 + S.iosPanel * 0.65;
|
||||
n2.style.transform = "translateY(" + (1 - S.iosPanel) * 12 + "px)";
|
||||
}
|
||||
if (ctl) {
|
||||
ctl.style.opacity = 0.72 + S.iosPanel * 0.28;
|
||||
ctl.style.transform = "scale(" + (0.97 + S.iosPanel * 0.03) + ")";
|
||||
}
|
||||
// Re-capture HTML to texture
|
||||
captureScreens();
|
||||
|
||||
@@ -676,58 +917,22 @@
|
||||
);
|
||||
lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
|
||||
turntable.rotation.y = S.turn;
|
||||
// Glass lens disabled for iOS 26
|
||||
glassLens.visible = false;
|
||||
// Single morphing glass — orbits around device edges, never overlaps screen
|
||||
var t = tl.time();
|
||||
var geoIdx = Math.floor(d * 0.8) % glassGeos.length;
|
||||
if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];
|
||||
glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);
|
||||
|
||||
// Glass lens disabled for iOS 26 showcase
|
||||
glassLens.visible = false;
|
||||
var gx, gy, gz;
|
||||
if (t < 7) {
|
||||
// Slide across iPhone screen face
|
||||
var px = phoneGrp.position.x,
|
||||
py = phoneGrp.position.y,
|
||||
pz = phoneGrp.position.z;
|
||||
gx = px + Math.sin(d * 1.4) * 0.35;
|
||||
gy = py + Math.cos(d * 1.1) * 0.6;
|
||||
gz = pz + 0.15;
|
||||
} else if (t < 11) {
|
||||
// Slide across MacBook screen face
|
||||
var lx2 = lapGrp.position.x,
|
||||
ly2 = lapGrp.position.y,
|
||||
lz2 = lapGrp.position.z;
|
||||
gx = lx2 + Math.sin(d * 1.2) * 1.2;
|
||||
gy = ly2 + 0.3 + Math.cos(d * 0.9) * 0.6;
|
||||
gz = lz2 + 0.2;
|
||||
} else {
|
||||
// Glide between both screens
|
||||
var mx = (phoneGrp.position.x + lapGrp.position.x) * 0.5;
|
||||
var my = (phoneGrp.position.y + lapGrp.position.y) * 0.5;
|
||||
gx = mx + Math.sin(d * 1.0) * 1.5;
|
||||
gy = my + 0.2 + Math.cos(d * 0.8) * 0.5;
|
||||
gz = 0.3;
|
||||
}
|
||||
glassLens.position.set(gx, gy, gz);
|
||||
bgUniforms.uTime.value = d;
|
||||
camera.position.set(S.cX, S.cY, S.cZ);
|
||||
camera.lookAt(S.clX, S.clY, S.clZ);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// ── GSAP Timeline — Product Review Edit ────────────────────────────
|
||||
// __timelines created in onReady() after GLTF models load
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["ios26-liquid-glass"] = tl;
|
||||
|
||||
tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
|
||||
|
||||
// ── iOS 26 Showcase: zoomed-in hero → slow zoom out ──
|
||||
// Start very close to the screen, facing front
|
||||
// Camera starts close (cZ=2.5) and slowly pulls back (cZ=5)
|
||||
tl.to(S, { cZ: 3.2, duration: 12, ease: driftEase }, 0.5);
|
||||
tl.to(S, { cY: 0.3, duration: 12, ease: driftEase }, 0.5);
|
||||
// ── iOS 26 Showcase: full-device hero with a subtle drift-in ──
|
||||
tl.to(S, { cZ: 6.45, duration: 12, ease: driftEase }, 0.5);
|
||||
tl.to(S, { cY: 0.16, duration: 12, ease: driftEase }, 0.5);
|
||||
|
||||
// Very gentle tilt — shows the glass icon refraction from slightly different angles
|
||||
tl.to(S, { phRY: PI + 0.04, phRX: 0.01, duration: 4, ease: breatheEase }, 0.5);
|
||||
@@ -739,8 +944,8 @@
|
||||
|
||||
// Move MacBook off screen so it doesn't appear
|
||||
tl.set(S, { lpX: 10 }, 0);
|
||||
|
||||
// __timelines registered in onReady() after GLTF models load
|
||||
tl.to(S, { iosAlert: 1, duration: 0.8, ease: breatheEase }, 0.35);
|
||||
tl.to(S, { iosPanel: 1, duration: 1.1, ease: breatheEase }, 0.75);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,7 +10,15 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 15,
|
||||
"tags": ["liquid-glass-html-in-canvas", "webgpu", "3d", "iphone", "ios26", "gltf", "html-in-canvas"],
|
||||
"tags": [
|
||||
"liquid-glass-html-in-canvas",
|
||||
"webgpu",
|
||||
"3d",
|
||||
"iphone",
|
||||
"ios26",
|
||||
"gltf",
|
||||
"html-in-canvas"
|
||||
],
|
||||
"files": [
|
||||
{
|
||||
"path": "ios26-liquid-glass.html",
|
||||
@@ -26,6 +34,131 @@
|
||||
"path": "lib/liquid-glass.iife.js",
|
||||
"target": "lib/liquid-glass.iife.js",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/weather.jpg",
|
||||
"target": "assets/icons/weather.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/stocks.jpg",
|
||||
"target": "assets/icons/stocks.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/find-my.jpg",
|
||||
"target": "assets/icons/find-my.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/home.jpg",
|
||||
"target": "assets/icons/home.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/books.jpg",
|
||||
"target": "assets/icons/books.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/itunes-store.jpg",
|
||||
"target": "assets/icons/itunes-store.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/fitness.jpg",
|
||||
"target": "assets/icons/fitness.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/watch.jpg",
|
||||
"target": "assets/icons/watch.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/contacts.jpg",
|
||||
"target": "assets/icons/contacts.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/files.jpg",
|
||||
"target": "assets/icons/files.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/translate.jpg",
|
||||
"target": "assets/icons/translate.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/calendar.jpg",
|
||||
"target": "assets/icons/calendar.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/chatgpt.jpg",
|
||||
"target": "assets/icons/chatgpt.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/slack.jpg",
|
||||
"target": "assets/icons/slack.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/instagram.jpg",
|
||||
"target": "assets/icons/instagram.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/x.jpg",
|
||||
"target": "assets/icons/x.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/proton-mail.jpg",
|
||||
"target": "assets/icons/proton-mail.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/gmail.jpg",
|
||||
"target": "assets/icons/gmail.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/revolut.jpg",
|
||||
"target": "assets/icons/revolut.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/photos.jpg",
|
||||
"target": "assets/icons/photos.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/phone.jpg",
|
||||
"target": "assets/icons/phone.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/brave.jpg",
|
||||
"target": "assets/icons/brave.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/messages.jpg",
|
||||
"target": "assets/icons/messages.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/notify-messages.jpg",
|
||||
"target": "assets/icons/notify-messages.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/music.jpg",
|
||||
"target": "assets/icons/music.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
|
||||
+217
-62
@@ -4,10 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Liquid Glass Context Menu</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="lib/liquid-glass.iife.js"></script>
|
||||
@@ -50,8 +46,8 @@
|
||||
/* ── Glass Panel ── */
|
||||
.menu-panel {
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
height: 380px;
|
||||
width: 360px;
|
||||
height: 500px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
--lg-blur: 0.22;
|
||||
--lg-refraction: 0.6;
|
||||
@@ -67,8 +63,8 @@
|
||||
--lg-saturation: 0.25;
|
||||
}
|
||||
#glass-menu {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
top: 270px;
|
||||
left: 1980px;
|
||||
}
|
||||
|
||||
/* ── Text Overlay ── */
|
||||
@@ -77,33 +73,120 @@
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.menu-text {
|
||||
width: 260px;
|
||||
height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
}
|
||||
#text-menu {
|
||||
top: 200px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.context-file {
|
||||
position: absolute;
|
||||
top: 340px;
|
||||
left: 500px;
|
||||
z-index: 2;
|
||||
width: 360px;
|
||||
height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
gap: 18px;
|
||||
padding: 18px 22px;
|
||||
border-radius: 26px;
|
||||
background: #02040a;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.22),
|
||||
0 24px 70px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.file-icon {
|
||||
width: 58px;
|
||||
height: 68px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 16px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(6, 227, 250, 0.92), rgba(79, 219, 94, 0.85)),
|
||||
rgba(255, 255, 255, 0.12);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
|
||||
}
|
||||
.file-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.file-title {
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
font-weight: 780;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.file-subtitle {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 650;
|
||||
}
|
||||
.pointer {
|
||||
position: absolute;
|
||||
top: 395px;
|
||||
left: 778px;
|
||||
z-index: 4;
|
||||
width: 34px;
|
||||
height: 44px;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
clip-path: polygon(0 0, 0 100%, 31% 73%, 47% 100%, 62% 93%, 46% 67%, 82% 67%);
|
||||
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));
|
||||
}
|
||||
.click-ring {
|
||||
position: absolute;
|
||||
top: 390px;
|
||||
left: 770px;
|
||||
z-index: 3;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.75);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
.menu-text {
|
||||
width: 360px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 0;
|
||||
background: #02040a;
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
|
||||
overflow: hidden;
|
||||
}
|
||||
#text-menu {
|
||||
top: 270px;
|
||||
left: 1980px;
|
||||
}
|
||||
|
||||
.menu-highlight {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 12px;
|
||||
z-index: 0;
|
||||
width: 336px;
|
||||
height: 52px;
|
||||
border-radius: 12px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
|
||||
rgba(255, 255, 255, 0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
opacity: 0;
|
||||
}
|
||||
.menu-item {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.menu-item svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
stroke: rgba(255, 255, 255, 0.7);
|
||||
stroke: rgba(255, 255, 255, 0.9);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
@@ -111,14 +194,16 @@
|
||||
}
|
||||
.menu-sep {
|
||||
height: 1px;
|
||||
margin: 6px 18px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 10px 24px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.menu-footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 18px;
|
||||
padding: 14px 26px;
|
||||
margin-top: auto;
|
||||
}
|
||||
.menu-footer-item {
|
||||
@@ -126,14 +211,15 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.menu-footer-item svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: rgba(255, 255, 255, 0.55);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: #fff;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
@@ -141,11 +227,31 @@
|
||||
}
|
||||
.menu-kbd {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.submenu-preview {
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 1980px;
|
||||
z-index: 2;
|
||||
width: 210px;
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 18px;
|
||||
background: #02040a;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.24),
|
||||
0 18px 42px rgba(0, 0, 0, 0.28);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 760;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -164,7 +270,18 @@
|
||||
<div id="glass-menu" class="menu-panel liquid-glass"></div>
|
||||
</canvas>
|
||||
|
||||
<div id="context-file" class="context-file">
|
||||
<div class="file-icon"></div>
|
||||
<div class="file-meta">
|
||||
<div class="file-title">liquid-glass.mov</div>
|
||||
<div class="file-subtitle">Preview render - 08s</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="click-ring" class="click-ring"></div>
|
||||
<div id="pointer" class="pointer"></div>
|
||||
|
||||
<div id="text-menu" class="text-overlay menu-text">
|
||||
<div id="menu-highlight" class="menu-highlight"></div>
|
||||
<div class="menu-item">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
|
||||
@@ -220,6 +337,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="submenu-preview" class="submenu-preview">Open in New Tab</div>
|
||||
|
||||
<div
|
||||
id="driver"
|
||||
@@ -321,8 +439,10 @@
|
||||
var glassCanvas = document.getElementById("glass-canvas");
|
||||
var ctx = glassCanvas.getContext("2d");
|
||||
var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
|
||||
var lgReady = false;
|
||||
|
||||
function renderGlass(time) {
|
||||
if (!lgReady) return;
|
||||
uniforms.uTime.value = time;
|
||||
renderer.render(scene, camera);
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
@@ -330,46 +450,81 @@
|
||||
lg.renderGlassElements();
|
||||
}
|
||||
|
||||
function requestGlassRender(time) {
|
||||
if (glassCanvas.requestPaint) {
|
||||
glassCanvas.onpaint = function () {
|
||||
renderGlass(time);
|
||||
};
|
||||
glassCanvas.requestPaint();
|
||||
return;
|
||||
}
|
||||
renderGlass(time);
|
||||
}
|
||||
|
||||
lg.waitForInit().then(function (ok) {
|
||||
if (!ok) return;
|
||||
lgReady = true;
|
||||
requestGlassRender(0);
|
||||
});
|
||||
|
||||
/* ── GSAP Timeline ──────────────────────────────────────────────── */
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
var gm = document.getElementById("glass-menu");
|
||||
var tm = document.getElementById("text-menu");
|
||||
var pointer = document.getElementById("pointer");
|
||||
var fileCard = document.getElementById("context-file");
|
||||
|
||||
/* Diagonal drift: top-left to bottom-right, then back */
|
||||
gsap.set([gm, tm], { left: 1980, top: 270, opacity: 1 });
|
||||
gsap.set(".menu-item", { x: -8, opacity: 1 });
|
||||
gsap.set("#menu-highlight", { top: 17, opacity: 0 });
|
||||
gsap.set("#submenu-preview", { left: 1980, opacity: 1 });
|
||||
gsap.set(fileCard, { top: 372 });
|
||||
|
||||
tl.to(fileCard, { top: 340, duration: 0.38, ease: "power3.out" }, 0.1);
|
||||
tl.fromTo(
|
||||
[gm, tm],
|
||||
{ left: 260, top: 160 },
|
||||
{ left: 1380, top: 160, duration: 4, ease: "sine.inOut" },
|
||||
0,
|
||||
pointer,
|
||||
{ left: 620, top: 520 },
|
||||
{ left: 778, top: 395, duration: 0.55, ease: "power3.out" },
|
||||
0.35,
|
||||
);
|
||||
tl.fromTo([gm, tm], { top: 160 }, { top: 540, duration: 4, ease: "power2.inOut" }, 0);
|
||||
|
||||
/* Return sweep */
|
||||
tl.to([gm, tm], { left: 260, duration: 4, ease: "sine.inOut" }, 4);
|
||||
tl.to([gm, tm], { top: 160, duration: 4, ease: "power1.inOut" }, 4);
|
||||
|
||||
/* Gentle vertical oscillation on top of the drift */
|
||||
tl.fromTo(
|
||||
[gm, tm],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=60", duration: 1.8, ease: "sine.inOut", yoyo: true, repeat: 3 },
|
||||
0,
|
||||
tl.to("#click-ring", { opacity: 0.7, scale: 1.2, duration: 0.16, ease: "power2.out" }, 0.86);
|
||||
tl.to("#click-ring", { opacity: 0, scale: 1.8, duration: 0.28, ease: "power2.out" }, 1.02);
|
||||
tl.to(
|
||||
fileCard,
|
||||
{ scale: 0.985, duration: 0.08, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
0.86,
|
||||
);
|
||||
|
||||
tl.to([gm, tm], { left: 860, top: 270, duration: 0.24, ease: "power3.out" }, 1.0);
|
||||
tl.to(".menu-item", { x: 0, duration: 0.22, ease: "power2.out", stagger: 0.035 }, 1.08);
|
||||
|
||||
tl.to("#menu-highlight", { opacity: 1, duration: 0.12, ease: "none" }, 1.35);
|
||||
tl.to("#menu-highlight", { top: 69, duration: 0.22, ease: "power2.out" }, 2.0);
|
||||
tl.to("#menu-highlight", { top: 227, duration: 0.2, ease: "power2.out" }, 2.85);
|
||||
tl.to("#menu-highlight", { top: 279, duration: 0.2, ease: "power2.out" }, 3.52);
|
||||
tl.to("#submenu-preview", { left: 1236, duration: 0.22, ease: "power2.out" }, 3.62);
|
||||
tl.to(pointer, { left: 1175, top: 472, duration: 0.42, ease: "power3.out" }, 3.7);
|
||||
tl.to(
|
||||
"#submenu-preview",
|
||||
{ scale: 0.965, duration: 0.09, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
4.28,
|
||||
);
|
||||
|
||||
tl.to("#submenu-preview", { left: 1980, duration: 0.18, ease: "power2.in" }, 6.34);
|
||||
tl.to([gm, tm], { left: 1980, top: 286, duration: 0.24, ease: "power2.in" }, 6.52);
|
||||
tl.to(pointer, { left: 1360, top: 590, opacity: 0, duration: 0.35, ease: "power2.in" }, 6.55);
|
||||
tl.to(fileCard, { top: -160, duration: 0.28, ease: "power2.in" }, 6.72);
|
||||
|
||||
/* Duration driver */
|
||||
tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
|
||||
|
||||
tl.eventCallback("onUpdate", function () {
|
||||
renderGlass(tl.time());
|
||||
requestGlassRender(tl.time());
|
||||
});
|
||||
|
||||
window.__timelines["liquid-glass-context-menu"] = tl;
|
||||
|
||||
setTimeout(function () {
|
||||
renderGlass(0);
|
||||
}, 0);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8,
|
||||
"tags": ["liquid-glass-html-in-canvas", "webgpu"],
|
||||
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
|
||||
"files": [
|
||||
{
|
||||
"path": "liquid-glass-context-menu.html",
|
||||
|
||||
+237
-158
@@ -4,10 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Liquid Glass Media Controls</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="lib/liquid-glass.iife.js"></script>
|
||||
@@ -65,41 +61,41 @@
|
||||
--lg-saturation: 0.25;
|
||||
}
|
||||
.search-panel {
|
||||
width: 480px;
|
||||
height: 56px;
|
||||
--lg-corner-radius: 18;
|
||||
width: 640px;
|
||||
height: 72px;
|
||||
--lg-corner-radius: 24;
|
||||
}
|
||||
.toggle-panel {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
width: 640px;
|
||||
height: 64px;
|
||||
--lg-corner-radius: 44;
|
||||
}
|
||||
.media-panel {
|
||||
width: 480px;
|
||||
height: 88px;
|
||||
width: 640px;
|
||||
height: 116px;
|
||||
--lg-corner-radius: 44;
|
||||
}
|
||||
.slider-panel {
|
||||
width: 480px;
|
||||
height: 58px;
|
||||
--lg-corner-radius: 22;
|
||||
width: 640px;
|
||||
height: 76px;
|
||||
--lg-corner-radius: 28;
|
||||
}
|
||||
|
||||
#glass-search {
|
||||
top: 400px;
|
||||
left: 720px;
|
||||
top: 300px;
|
||||
left: 640px;
|
||||
}
|
||||
#glass-toggle {
|
||||
top: 470px;
|
||||
left: 720px;
|
||||
top: 390px;
|
||||
left: 640px;
|
||||
}
|
||||
#glass-media {
|
||||
top: 534px;
|
||||
left: 720px;
|
||||
top: 476px;
|
||||
left: 640px;
|
||||
}
|
||||
#glass-slider {
|
||||
top: 636px;
|
||||
left: 720px;
|
||||
top: 616px;
|
||||
left: 640px;
|
||||
}
|
||||
|
||||
/* ── Text Overlays ── */
|
||||
@@ -111,85 +107,131 @@
|
||||
|
||||
/* Search bar */
|
||||
.search-text {
|
||||
width: 480px;
|
||||
height: 56px;
|
||||
width: 640px;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
gap: 16px;
|
||||
padding: 0 28px;
|
||||
background: #02040a;
|
||||
border-radius: 24px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.search-text svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke: rgba(255, 255, 255, 0.45);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
stroke: rgba(255, 255, 255, 0.86);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.search-text span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
.search-label {
|
||||
font-size: 19px;
|
||||
font-weight: 650;
|
||||
color: #fff;
|
||||
}
|
||||
.search-caret {
|
||||
width: 2px;
|
||||
height: 25px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
opacity: 0;
|
||||
}
|
||||
#text-search {
|
||||
top: 400px;
|
||||
left: 720px;
|
||||
top: 300px;
|
||||
left: 640px;
|
||||
}
|
||||
|
||||
/* Toggle row */
|
||||
.toggle-text {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
width: 640px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
padding: 6px;
|
||||
background: rgba(5, 10, 20, 0.52);
|
||||
border-radius: 44px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.toggle-active-pill {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
z-index: 0;
|
||||
width: 209px;
|
||||
height: 52px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.toggle-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
line-height: 52px;
|
||||
}
|
||||
.toggle-item.active {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 44px;
|
||||
}
|
||||
#text-toggle {
|
||||
top: 470px;
|
||||
left: 720px;
|
||||
top: 390px;
|
||||
left: 640px;
|
||||
}
|
||||
|
||||
/* Media pill */
|
||||
.media-text {
|
||||
width: 480px;
|
||||
height: 88px;
|
||||
width: 640px;
|
||||
height: 116px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 0 16px;
|
||||
gap: 22px;
|
||||
padding: 0 24px;
|
||||
background: rgba(5, 10, 20, 0.56);
|
||||
border-radius: 44px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.album-art {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #6366f1, #ec4899);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
border-radius: 20px;
|
||||
background:
|
||||
radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.78), transparent 16%),
|
||||
conic-gradient(from 210deg, #06e3fa, #4fdb5e, #f59e0b, #ec4899, #06e3fa);
|
||||
flex-shrink: 0;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28),
|
||||
0 12px 26px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.album-sheen {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -70px;
|
||||
width: 38px;
|
||||
height: 110px;
|
||||
background: rgba(255, 255, 255, 0.34);
|
||||
filter: blur(8px);
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
.media-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 7px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.media-title {
|
||||
font-size: 15px;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
@@ -197,45 +239,72 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.media-artist {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.media-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}
|
||||
.live-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #4ade80;
|
||||
box-shadow: 0 0 14px rgba(74, 222, 128, 0.76);
|
||||
}
|
||||
.sound-wave {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 3px;
|
||||
height: 16px;
|
||||
}
|
||||
.sound-wave span {
|
||||
width: 3px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
}
|
||||
.transport {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
gap: 24px;
|
||||
margin-left: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.transport svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
fill: #fff;
|
||||
stroke: none;
|
||||
}
|
||||
.transport .play-btn svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
#text-media {
|
||||
top: 534px;
|
||||
left: 720px;
|
||||
top: 476px;
|
||||
left: 640px;
|
||||
}
|
||||
|
||||
/* Brightness slider */
|
||||
.slider-text {
|
||||
width: 480px;
|
||||
height: 58px;
|
||||
width: 640px;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 22px;
|
||||
gap: 18px;
|
||||
padding: 0 28px;
|
||||
background: rgba(5, 10, 20, 0.56);
|
||||
border-radius: 28px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.slider-text svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: rgba(255, 255, 255, 0.6);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
stroke: rgba(255, 255, 255, 0.88);
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
@@ -244,31 +313,32 @@
|
||||
}
|
||||
.slider-track {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 3px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.slider-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 68%;
|
||||
width: 34%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.slider-pct {
|
||||
font-size: 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-variant-numeric: tabular-nums;
|
||||
width: 36px;
|
||||
width: 42px;
|
||||
text-align: right;
|
||||
}
|
||||
#text-slider {
|
||||
top: 636px;
|
||||
left: 720px;
|
||||
top: 616px;
|
||||
left: 640px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -297,11 +367,13 @@
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
<span>Search</span>
|
||||
<span id="search-label" class="search-label">Search</span>
|
||||
<span id="search-caret" class="search-caret"></span>
|
||||
</div>
|
||||
|
||||
<!-- Toggle row -->
|
||||
<div id="text-toggle" class="text-overlay toggle-text">
|
||||
<div id="toggle-pill" class="toggle-active-pill"></div>
|
||||
<div class="toggle-item active">All</div>
|
||||
<div class="toggle-item">Favorites</div>
|
||||
<div class="toggle-item">Recent</div>
|
||||
@@ -309,10 +381,16 @@
|
||||
|
||||
<!-- Media pill -->
|
||||
<div id="text-media" class="text-overlay media-text">
|
||||
<div class="album-art"></div>
|
||||
<div class="album-art"><span id="album-sheen" class="album-sheen"></span></div>
|
||||
<div class="media-info">
|
||||
<div class="media-title">Midnight Drive</div>
|
||||
<div class="media-meta-row">
|
||||
<span id="live-dot" class="live-dot"></span>
|
||||
<div class="media-artist">Glass Resonance</div>
|
||||
<div id="sound-wave" class="sound-wave">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="transport">
|
||||
<span>
|
||||
@@ -346,8 +424,8 @@
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
||||
</svg>
|
||||
<div class="slider-track"><div class="slider-fill"></div></div>
|
||||
<span class="slider-pct">68%</span>
|
||||
<div class="slider-track"><div id="slider-fill" class="slider-fill"></div></div>
|
||||
<span id="slider-pct" class="slider-pct">34%</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -450,8 +528,10 @@
|
||||
var glassCanvas = document.getElementById("glass-canvas");
|
||||
var ctx = glassCanvas.getContext("2d");
|
||||
var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
|
||||
var lgReady = false;
|
||||
|
||||
function renderGlass(time) {
|
||||
if (!lgReady) return;
|
||||
uniforms.uTime.value = time;
|
||||
renderer.render(scene, camera);
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
@@ -459,6 +539,23 @@
|
||||
lg.renderGlassElements();
|
||||
}
|
||||
|
||||
function requestGlassRender(time) {
|
||||
if (glassCanvas.requestPaint) {
|
||||
glassCanvas.onpaint = function () {
|
||||
renderGlass(time);
|
||||
};
|
||||
glassCanvas.requestPaint();
|
||||
return;
|
||||
}
|
||||
renderGlass(time);
|
||||
}
|
||||
|
||||
lg.waitForInit().then(function (ok) {
|
||||
if (!ok) return;
|
||||
lgReady = true;
|
||||
requestGlassRender(0);
|
||||
});
|
||||
|
||||
/* ── GSAP Timeline ──────────────────────────────────────────────── */
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
@@ -471,99 +568,81 @@
|
||||
var tt = document.getElementById("text-toggle");
|
||||
var tm = document.getElementById("text-media");
|
||||
var tsl = document.getElementById("text-slider");
|
||||
var searchLabel = document.getElementById("search-label");
|
||||
var sliderPct = document.getElementById("slider-pct");
|
||||
var sliderValue = { value: 34 };
|
||||
|
||||
/* All panels start stacked at center */
|
||||
var cx = 720,
|
||||
cy = 496;
|
||||
gsap.set([gs, ts, gt, tt, gm, tm, gsl, tsl], { top: 1160, opacity: 1 });
|
||||
gsap.set("#sound-wave span", { height: 7 });
|
||||
|
||||
/* Search: drifts upper-left */
|
||||
tl.fromTo(
|
||||
[gs, ts],
|
||||
{ left: cx, top: cy },
|
||||
{ left: 180, top: 180, duration: 3, ease: "power2.out" },
|
||||
0,
|
||||
tl.to([gs, ts], { top: 300, duration: 0.48, ease: "power3.out" }, 0.12);
|
||||
tl.to([gt, tt], { top: 390, duration: 0.44, ease: "power3.out" }, 0.22);
|
||||
tl.to([gm, tm], { top: 476, duration: 0.44, ease: "power3.out" }, 0.32);
|
||||
tl.to([gsl, tsl], { top: 616, duration: 0.46, ease: "power3.out" }, 0.42);
|
||||
|
||||
tl.call(
|
||||
function () {
|
||||
searchLabel.textContent = "Search Music";
|
||||
},
|
||||
null,
|
||||
0.9,
|
||||
);
|
||||
tl.to(
|
||||
[gs, ts],
|
||||
{ left: 320, top: 260, duration: 5, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
3,
|
||||
"#search-caret",
|
||||
{ opacity: 1, duration: 0.1, yoyo: true, repeat: 5, ease: "none" },
|
||||
0.94,
|
||||
);
|
||||
tl.fromTo(
|
||||
[gs, ts],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=50", duration: 2.2, ease: "sine.inOut", yoyo: true, repeat: 2 },
|
||||
1,
|
||||
tl.call(
|
||||
function () {
|
||||
searchLabel.textContent = "Midnight Drive";
|
||||
},
|
||||
null,
|
||||
1.55,
|
||||
);
|
||||
|
||||
/* Toggle: drifts upper-right */
|
||||
tl.fromTo(
|
||||
[gt, tt],
|
||||
{ left: cx, top: cy },
|
||||
{ left: 1340, top: 220, duration: 3.2, ease: "back.out(1.2)" },
|
||||
0,
|
||||
tl.to("#toggle-pill", { left: 215, duration: 0.24, ease: "power2.out" }, 1.82);
|
||||
tl.to(
|
||||
".play-btn",
|
||||
{ scale: 0.86, duration: 0.12, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
2.18,
|
||||
);
|
||||
tl.to("#album-sheen", { left: 112, duration: 0.75, ease: "power2.out" }, 2.2);
|
||||
tl.to(
|
||||
"#sound-wave span",
|
||||
{ height: 15, duration: 0.22, ease: "power2.inOut", stagger: 0.05, yoyo: true, repeat: 12 },
|
||||
2.2,
|
||||
);
|
||||
tl.to(
|
||||
[gt, tt],
|
||||
{ left: 1200, top: 300, duration: 4.8, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
3.2,
|
||||
);
|
||||
tl.fromTo(
|
||||
[gt, tt],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=40", duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 3 },
|
||||
0.5,
|
||||
);
|
||||
|
||||
/* Media: drifts lower-left */
|
||||
tl.fromTo(
|
||||
[gm, tm],
|
||||
{ left: cx, top: cy },
|
||||
{ left: 200, top: 740, duration: 2.8, ease: "expo.out" },
|
||||
0,
|
||||
sliderValue,
|
||||
{
|
||||
value: 82,
|
||||
duration: 4.4,
|
||||
ease: "none",
|
||||
onUpdate: function () {
|
||||
sliderPct.textContent = Math.round(sliderValue.value) + "%";
|
||||
},
|
||||
},
|
||||
1.2,
|
||||
);
|
||||
tl.to("#slider-fill", { width: "82%", duration: 4.4, ease: "none" }, 1.2);
|
||||
tl.to(
|
||||
[gm, tm],
|
||||
{ left: 400, top: 680, duration: 5.2, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
2.8,
|
||||
);
|
||||
tl.fromTo(
|
||||
[gm, tm],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=55", duration: 2.5, ease: "sine.inOut", yoyo: true, repeat: 2 },
|
||||
0.8,
|
||||
"#live-dot",
|
||||
{ scale: 1.45, duration: 0.24, ease: "power2.out", yoyo: true, repeat: 4 },
|
||||
2.6,
|
||||
);
|
||||
tl.to("#toggle-pill", { left: 425, duration: 0.24, ease: "power2.out" }, 4.15);
|
||||
|
||||
/* Slider: drifts lower-right */
|
||||
tl.fromTo(
|
||||
[gsl, tsl],
|
||||
{ left: cx, top: cy },
|
||||
{ left: 1280, top: 800, duration: 3.5, ease: "circ.out" },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
[gsl, tsl],
|
||||
{ left: 1100, top: 720, duration: 4.5, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
3.5,
|
||||
);
|
||||
tl.fromTo(
|
||||
[gsl, tsl],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=45", duration: 2.0, ease: "sine.inOut", yoyo: true, repeat: 2 },
|
||||
0.3,
|
||||
);
|
||||
var stack = [gs, ts, gt, tt, gm, tm, gsl, tsl];
|
||||
tl.to(stack, { top: "-=8", duration: 0.22, ease: "power2.out", yoyo: true, repeat: 1 }, 5.55);
|
||||
tl.to(stack, { top: "+=760", duration: 0.42, ease: "power2.in" }, 6.72);
|
||||
|
||||
/* Duration driver */
|
||||
tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
|
||||
|
||||
tl.eventCallback("onUpdate", function () {
|
||||
renderGlass(tl.time());
|
||||
requestGlassRender(tl.time());
|
||||
});
|
||||
|
||||
window.__timelines["liquid-glass-media-controls"] = tl;
|
||||
|
||||
setTimeout(function () {
|
||||
renderGlass(0);
|
||||
}, 0);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8,
|
||||
"tags": ["liquid-glass-html-in-canvas", "webgpu"],
|
||||
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
|
||||
"files": [
|
||||
{
|
||||
"path": "liquid-glass-media-controls.html",
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="white"/>
|
||||
<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="white"/>
|
||||
<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="white"/>
|
||||
<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="white"/>
|
||||
<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="white"/>
|
||||
<path d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z" fill="white"/>
|
||||
<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3044)"/>
|
||||
<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3044)"/>
|
||||
<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="white"/>
|
||||
<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="white"/>
|
||||
<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="white"/>
|
||||
<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="white"/>
|
||||
<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="white"/>
|
||||
<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="white"/>
|
||||
<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="white"/>
|
||||
<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="white"/>
|
||||
<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="white"/>
|
||||
<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="white"/>
|
||||
<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2204_3044" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#06E3FA"/>
|
||||
<stop offset="1" stop-color="#4FDB5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2204_3044" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#06E3FA"/>
|
||||
<stop offset="1" stop-color="#4FDB5E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
+305
-58
@@ -3,22 +3,52 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="lib/liquid-glass.iife.js"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #000; }
|
||||
body { font-family: "Inter", sans-serif; color: #fff; }
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
body {
|
||||
font-family: "Inter", sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#three-canvas { position: absolute; inset: 0; z-index: 0; display: block; }
|
||||
#glass-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 1920px; height: 1080px; }
|
||||
.text-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
|
||||
#three-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
display: block;
|
||||
}
|
||||
#glass-canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
}
|
||||
.text-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
position: absolute;
|
||||
width: 520px; height: 100px;
|
||||
width: 520px;
|
||||
height: 118px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
--lg-blur: 0.22;
|
||||
--lg-refraction: 0.6;
|
||||
@@ -33,35 +63,153 @@
|
||||
--lg-shadow-offset-y: 4;
|
||||
--lg-saturation: 0.25;
|
||||
}
|
||||
.glass-panel.p1 { top: 60px; left: 1340px; }
|
||||
.glass-panel.p2 { top: 180px; left: 1340px; }
|
||||
.glass-panel.p1 {
|
||||
top: 60px;
|
||||
left: 1340px;
|
||||
}
|
||||
.glass-panel.p2 {
|
||||
top: 196px;
|
||||
left: 1340px;
|
||||
}
|
||||
|
||||
.notif-card {
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 118px;
|
||||
padding: 18px 24px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.notif-card.c1 {
|
||||
top: 60px;
|
||||
left: 1340px;
|
||||
}
|
||||
.notif-card.c2 {
|
||||
top: 196px;
|
||||
left: 1340px;
|
||||
}
|
||||
.notif-card.c1 { top: 60px; left: 1340px; }
|
||||
.notif-card.c2 { top: 180px; left: 1340px; }
|
||||
|
||||
.avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 18px; font-weight: 800; flex-shrink: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35),
|
||||
0 10px 24px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.avatar-ja {
|
||||
width: 128px;
|
||||
border-radius: 20px;
|
||||
background: rgba(2, 4, 10, 0.72);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18),
|
||||
0 10px 24px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.hyperframes-logo {
|
||||
width: 102px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.avatar-kl {
|
||||
background: linear-gradient(135deg, #ff7ab6, #8b5cf6);
|
||||
}
|
||||
.notif-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.notif-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.notif-name {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.notif-time {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.notif-text {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
line-height: 1.32;
|
||||
}
|
||||
.notif-progress {
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
bottom: 15px;
|
||||
left: 168px;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.notif-progress-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #06e3fa, #4fdb5e);
|
||||
box-shadow: 0 0 16px rgba(79, 219, 94, 0.55);
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #06e3fa;
|
||||
box-shadow: 0 0 16px rgba(6, 227, 250, 0.65);
|
||||
}
|
||||
.notif-actions {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 13px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
}
|
||||
.action-chip {
|
||||
padding: 5px 11px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.94);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.typing-dots {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
margin-left: 5px;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.typing-dots span {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
}
|
||||
.avatar-ja { background: linear-gradient(135deg, #667eea, #764ba2); }
|
||||
.avatar-kl { background: linear-gradient(135deg, #f093fb, #f5576c); }
|
||||
.notif-body { flex: 1; min-width: 0; }
|
||||
.notif-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
|
||||
.notif-name { font-size: 20px; font-weight: 700; }
|
||||
.notif-time { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.55); }
|
||||
.notif-text { font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.88); line-height: 1.4; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="liquid-glass-notification" data-start="0" data-duration="8" data-width="1920" data-height="1080">
|
||||
|
||||
<div
|
||||
id="root"
|
||||
data-composition-id="liquid-glass-notification"
|
||||
data-start="0"
|
||||
data-duration="8"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<canvas id="three-canvas"></canvas>
|
||||
|
||||
<canvas id="glass-canvas" layoutsubtree width="1920" height="1080">
|
||||
@@ -71,23 +219,44 @@
|
||||
|
||||
<div class="text-overlay">
|
||||
<div class="notif-card c1" id="txt1">
|
||||
<div class="avatar avatar-ja">JA</div>
|
||||
<div class="avatar avatar-ja">
|
||||
<img
|
||||
class="hyperframes-logo"
|
||||
src="assets/hyperframes-logo-dark.svg"
|
||||
alt="HyperFrames"
|
||||
/>
|
||||
</div>
|
||||
<div class="notif-body">
|
||||
<div class="notif-header">
|
||||
<span class="notif-name">John Appleseed</span>
|
||||
<span class="notif-time">now</span>
|
||||
<span class="notif-name">Render complete</span>
|
||||
<span class="status-dot" id="status-dot"></span>
|
||||
<span class="notif-time" id="render-status">rendering</span>
|
||||
</div>
|
||||
<div class="notif-text" id="render-copy">
|
||||
Liquid glass preview is encoding with GPU capture.
|
||||
</div>
|
||||
<div class="notif-progress">
|
||||
<div class="notif-progress-fill" id="render-progress"></div>
|
||||
</div>
|
||||
<div class="notif-text">My orchard just shipped a critical bug fix. The apples now fall closer to the tree.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notif-card c2" id="txt2">
|
||||
<div class="avatar avatar-kl">KL</div>
|
||||
<div class="avatar avatar-kl">M</div>
|
||||
<div class="notif-body">
|
||||
<div class="notif-header">
|
||||
<span class="notif-name">Kate Linen</span>
|
||||
<span class="notif-time">2m ago</span>
|
||||
<span class="notif-name">Messages</span>
|
||||
<span class="notif-time">now</span>
|
||||
</div>
|
||||
<div class="notif-text">
|
||||
Miguel: can it feel alive but still native?
|
||||
<span class="typing-dots" id="typing-dots"
|
||||
><span></span><span></span><span></span
|
||||
></span>
|
||||
</div>
|
||||
<div class="notif-actions" id="reply-actions">
|
||||
<span class="action-chip">Reply</span>
|
||||
<span class="action-chip">Mark Read</span>
|
||||
</div>
|
||||
<div class="notif-text">The new design system is live. Glass everywhere.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,7 +265,11 @@
|
||||
<script>
|
||||
(function () {
|
||||
var threeCanvas = document.getElementById("three-canvas");
|
||||
var threeRenderer = new THREE.WebGLRenderer({ canvas: threeCanvas, antialias: false, preserveDrawingBuffer: true });
|
||||
var threeRenderer = new THREE.WebGLRenderer({
|
||||
canvas: threeCanvas,
|
||||
antialias: false,
|
||||
preserveDrawingBuffer: true,
|
||||
});
|
||||
threeRenderer.setSize(1920, 1080);
|
||||
threeRenderer.setPixelRatio(1);
|
||||
var threeScene = new THREE.Scene();
|
||||
@@ -161,14 +334,21 @@
|
||||
" float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);",
|
||||
" col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));",
|
||||
" gl_FragColor=vec4(col,1.0);",
|
||||
"}"
|
||||
"}",
|
||||
].join("\n");
|
||||
|
||||
var uniforms = { uTime: { value: 0.0 } };
|
||||
threeScene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.ShaderMaterial({
|
||||
vertexShader: "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }",
|
||||
fragmentShader: fs, uniforms: uniforms
|
||||
})));
|
||||
threeScene.add(
|
||||
new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(2, 2),
|
||||
new THREE.ShaderMaterial({
|
||||
vertexShader:
|
||||
"varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }",
|
||||
fragmentShader: fs,
|
||||
uniforms: uniforms,
|
||||
}),
|
||||
),
|
||||
);
|
||||
threeRenderer.render(threeScene, threeCamera);
|
||||
|
||||
var glassCanvas = document.getElementById("glass-canvas");
|
||||
@@ -188,14 +368,21 @@
|
||||
lg.waitForInit().then(function (ok) {
|
||||
if (!ok) return;
|
||||
lgReady = true;
|
||||
glassCanvas.onpaint = function () { renderFrame(0); };
|
||||
glassCanvas.onpaint = function () {
|
||||
renderFrame(0);
|
||||
};
|
||||
if (glassCanvas.requestPaint) glassCanvas.requestPaint();
|
||||
});
|
||||
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
tl.to({}, { duration: 8, ease: "none", onUpdate: function () {
|
||||
tl.to(
|
||||
{},
|
||||
{
|
||||
duration: 8,
|
||||
ease: "none",
|
||||
onUpdate: function () {
|
||||
var t = tl.time();
|
||||
uniforms.uTime.value = t;
|
||||
threeRenderer.render(threeScene, threeCamera);
|
||||
@@ -207,27 +394,87 @@
|
||||
};
|
||||
if (glassCanvas.requestPaint) glassCanvas.requestPaint();
|
||||
}
|
||||
}}, 0);
|
||||
},
|
||||
},
|
||||
0,
|
||||
);
|
||||
|
||||
// Notification 1: slide in from right, stay top-right, gentle float, slide out
|
||||
tl.fromTo("#gp1", { left: "1980px" }, { left: "1340px", duration: 0.7, ease: "power3.out" }, 0.2);
|
||||
tl.fromTo("#txt1", { left: "1980px" }, { left: "1340px", duration: 0.7, ease: "power3.out" }, 0.2);
|
||||
var renderStatus = document.getElementById("render-status");
|
||||
var renderCopy = document.getElementById("render-copy");
|
||||
|
||||
// Notification 2: slide in staggered
|
||||
tl.fromTo("#gp2", { left: "1980px" }, { left: "1340px", duration: 0.7, ease: "power3.out" }, 0.6);
|
||||
tl.fromTo("#txt2", { left: "1980px" }, { left: "1340px", duration: 0.7, ease: "power3.out" }, 0.6);
|
||||
gsap.set(["#gp1", "#txt1", "#gp2", "#txt2"], { left: "1980px", opacity: 0 });
|
||||
gsap.set("#reply-actions", { y: 8, opacity: 0 });
|
||||
gsap.set("#typing-dots span", { opacity: 0.35 });
|
||||
|
||||
// Gentle breathing float while visible
|
||||
tl.to("#gp1", { top: "54px", duration: 2.5, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.5);
|
||||
tl.to("#txt1", { top: "54px", duration: 2.5, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.5);
|
||||
tl.to("#gp2", { top: "174px", duration: 2.8, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.8);
|
||||
tl.to("#txt2", { top: "174px", duration: 2.8, ease: "sine.inOut", yoyo: true, repeat: 1 }, 1.8);
|
||||
tl.to(
|
||||
["#gp1", "#txt1"],
|
||||
{ left: "1326px", opacity: 1, duration: 0.38, ease: "power3.out" },
|
||||
0.18,
|
||||
);
|
||||
tl.to(["#gp1", "#txt1"], { left: "1340px", duration: 0.16, ease: "power2.out" }, 0.56);
|
||||
|
||||
// Slide out to right
|
||||
tl.to("#gp1", { left: "1980px", duration: 0.5, ease: "power2.in" }, 6.8);
|
||||
tl.to("#txt1", { left: "1980px", duration: 0.5, ease: "power2.in" }, 6.8);
|
||||
tl.to("#gp2", { left: "1980px", duration: 0.5, ease: "power2.in" }, 7.0);
|
||||
tl.to("#txt2", { left: "1980px", duration: 0.5, ease: "power2.in" }, 7.0);
|
||||
tl.to(
|
||||
["#gp2", "#txt2"],
|
||||
{ left: "1326px", opacity: 1, duration: 0.36, ease: "power3.out" },
|
||||
0.82,
|
||||
);
|
||||
tl.to(["#gp2", "#txt2"], { left: "1340px", duration: 0.16, ease: "power2.out" }, 1.18);
|
||||
|
||||
tl.to("#render-progress", { width: "100%", duration: 3.4, ease: "none" }, 0.82);
|
||||
tl.to(
|
||||
"#status-dot",
|
||||
{ scale: 1.45, duration: 0.18, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
1.1,
|
||||
);
|
||||
tl.to(
|
||||
"#typing-dots span",
|
||||
{
|
||||
opacity: 1,
|
||||
y: -2,
|
||||
duration: 0.22,
|
||||
ease: "power2.out",
|
||||
stagger: 0.08,
|
||||
yoyo: true,
|
||||
repeat: 5,
|
||||
},
|
||||
1.2,
|
||||
);
|
||||
tl.to(["#gp2", "#txt2"], { top: "+=10", duration: 0.18, ease: "power2.out" }, 2.55);
|
||||
tl.to(["#gp2", "#txt2"], { top: "-=10", duration: 0.22, ease: "power2.out" }, 2.73);
|
||||
tl.to("#reply-actions", { y: 0, opacity: 1, duration: 0.24, ease: "power2.out" }, 2.72);
|
||||
tl.to(
|
||||
"#status-dot",
|
||||
{
|
||||
backgroundColor: "#4ade80",
|
||||
boxShadow: "0 0 18px rgba(74, 222, 128, 0.8)",
|
||||
duration: 0.15,
|
||||
},
|
||||
4.25,
|
||||
);
|
||||
tl.call(
|
||||
function () {
|
||||
renderStatus.textContent = "complete";
|
||||
renderCopy.textContent = "liquid-glass-notification.mp4 is ready.";
|
||||
},
|
||||
null,
|
||||
4.25,
|
||||
);
|
||||
tl.to(
|
||||
["#gp1", "#txt1"],
|
||||
{ top: "-=8", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
4.25,
|
||||
);
|
||||
|
||||
tl.to(
|
||||
["#gp1", "#txt1"],
|
||||
{ left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" },
|
||||
6.72,
|
||||
);
|
||||
tl.to(
|
||||
["#gp2", "#txt2"],
|
||||
{ left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" },
|
||||
6.9,
|
||||
);
|
||||
|
||||
window.__timelines["liquid-glass-notification"] = tl;
|
||||
})();
|
||||
|
||||
@@ -10,12 +10,17 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8,
|
||||
"tags": ["liquid-glass-html-in-canvas", "webgpu"],
|
||||
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
|
||||
"files": [
|
||||
{
|
||||
"path": "liquid-glass-notification.html",
|
||||
"target": "compositions/liquid-glass-notification.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "assets/hyperframes-logo-dark.svg",
|
||||
"target": "compositions/assets/hyperframes-logo-dark.svg",
|
||||
"type": "registry:asset"
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="white"/>
|
||||
<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="white"/>
|
||||
<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="white"/>
|
||||
<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="white"/>
|
||||
<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="white"/>
|
||||
<path d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z" fill="white"/>
|
||||
<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3044)"/>
|
||||
<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3044)"/>
|
||||
<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="white"/>
|
||||
<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="white"/>
|
||||
<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="white"/>
|
||||
<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="white"/>
|
||||
<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="white"/>
|
||||
<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="white"/>
|
||||
<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="white"/>
|
||||
<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="white"/>
|
||||
<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="white"/>
|
||||
<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="white"/>
|
||||
<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="white"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_2204_3044" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#06E3FA"/>
|
||||
<stop offset="1" stop-color="#4FDB5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_2204_3044" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#06E3FA"/>
|
||||
<stop offset="1" stop-color="#4FDB5E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.1 KiB |
+230
-158
@@ -4,10 +4,6 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=1920, height=1080" />
|
||||
<title>Liquid Glass Widgets</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<script src="lib/liquid-glass.iife.js"></script>
|
||||
@@ -122,12 +118,17 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
padding: 22px;
|
||||
border-radius: 28px;
|
||||
background: #02040a;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
@@ -141,7 +142,66 @@
|
||||
.stat-unit {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
color: #fff;
|
||||
}
|
||||
.mini-meter {
|
||||
width: 140px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.mini-meter-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #06e3fa, #4fdb5e);
|
||||
box-shadow: 0 0 12px rgba(79, 219, 94, 0.55);
|
||||
}
|
||||
.battery-shell {
|
||||
position: relative;
|
||||
width: 118px;
|
||||
height: 40px;
|
||||
padding: 4px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.66);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.battery-shell::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -9px;
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background: rgba(255, 255, 255, 0.66);
|
||||
}
|
||||
.battery-fill {
|
||||
width: 72%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #4ade80, #06e3fa);
|
||||
box-shadow: 0 0 18px rgba(74, 222, 128, 0.45);
|
||||
}
|
||||
.steps-ring {
|
||||
width: 106px;
|
||||
height: 106px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(#a78bfa 0deg, #06e3fa 180deg, rgba(255, 255, 255, 0.18) 180deg);
|
||||
}
|
||||
.steps-ring-inner {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: #02040a;
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
#text-stat1 {
|
||||
top: 300px;
|
||||
@@ -166,14 +226,23 @@
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 32px;
|
||||
border-radius: 28px;
|
||||
background: #02040a;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
.showcase-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 168px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.showcase-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.showcase-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
@@ -184,11 +253,39 @@
|
||||
.showcase-desc {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
max-width: 380px;
|
||||
}
|
||||
.showcase-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.showcase-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #4ade80;
|
||||
box-shadow: 0 0 14px rgba(74, 222, 128, 0.7);
|
||||
}
|
||||
.showcase-progress {
|
||||
width: 300px;
|
||||
height: 7px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.showcase-progress-fill {
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #06e3fa, #4fdb5e);
|
||||
}
|
||||
#text-showcase {
|
||||
top: 380px;
|
||||
left: 1100px;
|
||||
@@ -202,6 +299,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border-radius: 40px;
|
||||
background: #02040a;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
.pill-dot {
|
||||
width: 8px;
|
||||
@@ -262,59 +362,41 @@
|
||||
<!-- Stat cards -->
|
||||
<div id="text-stat1" class="text-overlay stat-text">
|
||||
<span class="stat-label">Temperature</span>
|
||||
<span class="stat-value">24<span class="stat-unit">°</span></span>
|
||||
<span class="stat-value"
|
||||
><span id="temp-value">21</span><span class="stat-unit">°</span></span
|
||||
>
|
||||
<div class="mini-meter"><div id="temp-meter" class="mini-meter-fill"></div></div>
|
||||
</div>
|
||||
<div id="text-stat2" class="text-overlay stat-text">
|
||||
<span class="stat-label">Battery</span>
|
||||
<span class="stat-value">87<span class="stat-unit">%</span></span>
|
||||
<div class="battery-shell"><div id="battery-fill" class="battery-fill"></div></div>
|
||||
<span class="stat-value"
|
||||
><span id="battery-value">87</span><span class="stat-unit">%</span></span
|
||||
>
|
||||
</div>
|
||||
<div id="text-stat3" class="text-overlay stat-text">
|
||||
<span class="stat-label">Steps</span>
|
||||
<span class="stat-value">8.2<span class="stat-unit">K</span></span>
|
||||
<div id="steps-ring" class="steps-ring">
|
||||
<div id="steps-value" class="steps-ring-inner">8.2K</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Showcase card -->
|
||||
<div id="text-showcase" class="text-overlay showcase-text">
|
||||
<div class="showcase-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 100 100" fill="none">
|
||||
<path
|
||||
d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z"
|
||||
fill="url(#hfm0)"
|
||||
/>
|
||||
<path
|
||||
d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"
|
||||
fill="url(#hfm1)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="hfm0"
|
||||
x1="48.5676"
|
||||
y1="25"
|
||||
x2="44.7804"
|
||||
y2="71.9384"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#06E3FA" />
|
||||
<stop offset="1" stop-color="#4FDB5E" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="hfm1"
|
||||
x1="54.8282"
|
||||
y1="73.8392"
|
||||
x2="72.0989"
|
||||
y2="32.8932"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#06E3FA" />
|
||||
<stop offset="1" stop-color="#4FDB5E" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<img class="showcase-logo" src="assets/hyperframes-logo-dark.svg" alt="HyperFrames" />
|
||||
</div>
|
||||
<div class="showcase-title">HyperFrames</div>
|
||||
<div class="showcase-title">Preview pipeline</div>
|
||||
<div class="showcase-desc">
|
||||
Write HTML, render video. Ship compositions at the speed of code.
|
||||
</div>
|
||||
<div class="showcase-status">
|
||||
<span class="showcase-dot" id="showcase-dot"></span
|
||||
><span id="showcase-status">Encoding frames</span>
|
||||
</div>
|
||||
<div class="showcase-progress">
|
||||
<div id="showcase-progress" class="showcase-progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pill chips -->
|
||||
@@ -431,8 +513,10 @@
|
||||
var glassCanvas = document.getElementById("glass-canvas");
|
||||
var ctx = glassCanvas.getContext("2d");
|
||||
var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);
|
||||
var lgReady = false;
|
||||
|
||||
function renderGlass(time) {
|
||||
if (!lgReady) return;
|
||||
uniforms.uTime.value = time;
|
||||
renderer.render(scene, camera);
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
@@ -440,6 +524,23 @@
|
||||
lg.renderGlassElements();
|
||||
}
|
||||
|
||||
function requestGlassRender(time) {
|
||||
if (glassCanvas.requestPaint) {
|
||||
glassCanvas.onpaint = function () {
|
||||
renderGlass(time);
|
||||
};
|
||||
glassCanvas.requestPaint();
|
||||
return;
|
||||
}
|
||||
renderGlass(time);
|
||||
}
|
||||
|
||||
lg.waitForInit().then(function (ok) {
|
||||
if (!ok) return;
|
||||
lgReady = true;
|
||||
requestGlassRender(0);
|
||||
});
|
||||
|
||||
/* ── GSAP Timeline ──────────────────────────────────────────────── */
|
||||
window.__timelines = window.__timelines || {};
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
@@ -460,139 +561,110 @@
|
||||
var p2t = document.getElementById("text-pill2");
|
||||
var p3t = document.getElementById("text-pill3");
|
||||
|
||||
/* ── Stat cards: loose circular orbit ── */
|
||||
/* Stat 1: elliptical orbit upper region */
|
||||
tl.fromTo(
|
||||
[s1g, s1t],
|
||||
{ left: 300, top: 260 },
|
||||
{ left: 900, top: 260, duration: 4, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
);
|
||||
tl.fromTo(
|
||||
[s1g, s1t],
|
||||
{ top: 260 },
|
||||
{ top: 440, duration: 2.6, ease: "sine.inOut", yoyo: true, repeat: 2 },
|
||||
0,
|
||||
);
|
||||
var tempValue = document.getElementById("temp-value");
|
||||
var batteryValue = document.getElementById("battery-value");
|
||||
var stepsValue = document.getElementById("steps-value");
|
||||
var stepsRing = document.getElementById("steps-ring");
|
||||
var showcaseStatus = document.getElementById("showcase-status");
|
||||
var tempCounter = { value: 21 };
|
||||
var batteryCounter = { value: 87 };
|
||||
var stepsCounter = { value: 8.2 };
|
||||
|
||||
/* Stat 2: offset orbit mid region */
|
||||
tl.fromTo(
|
||||
[s2g, s2t],
|
||||
{ left: 700, top: 380 },
|
||||
{ left: 1200, top: 380, duration: 3.6, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
);
|
||||
tl.fromTo(
|
||||
[s2g, s2t],
|
||||
{ top: 380 },
|
||||
{ top: 200, duration: 3.2, ease: "power1.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
);
|
||||
var allPanels = [s1g, s1t, s2g, s2t, s3g, s3t, scg, sct, p1g, p1t, p2g, p2t, p3g, p3t];
|
||||
gsap.set(allPanels, { opacity: 1, top: 1160 });
|
||||
|
||||
/* Stat 3: offset orbit right region */
|
||||
tl.fromTo(
|
||||
[s3g, s3t],
|
||||
{ left: 1100, top: 300 },
|
||||
{ left: 500, top: 300, duration: 4.4, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
);
|
||||
tl.fromTo(
|
||||
[s3g, s3t],
|
||||
{ top: 300 },
|
||||
{ top: 500, duration: 2.0, ease: "sine.inOut", yoyo: true, repeat: 3 },
|
||||
0,
|
||||
);
|
||||
tl.to([s1g, s1t], { top: 300, duration: 0.46, ease: "power3.out" }, 0.12);
|
||||
tl.to([s2g, s2t], { top: 300, duration: 0.46, ease: "power3.out" }, 0.24);
|
||||
tl.to([s3g, s3t], { top: 300, duration: 0.46, ease: "power3.out" }, 0.36);
|
||||
tl.to([scg, sct], { top: 380, duration: 0.5, ease: "power3.out" }, 0.5);
|
||||
tl.to([p1g, p1t], { top: 720, duration: 0.32, ease: "power3.out" }, 0.9);
|
||||
tl.to([p2g, p2t], { top: 720, duration: 0.32, ease: "power3.out" }, 1.0);
|
||||
tl.to([p3g, p3t], { top: 720, duration: 0.32, ease: "power3.out" }, 1.1);
|
||||
|
||||
/* ── Showcase card: independent drift ── */
|
||||
tl.fromTo(
|
||||
[scg, sct],
|
||||
{ left: 1050, top: 340 },
|
||||
{ left: 700, top: 340, duration: 8, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
tl.to("#temp-meter", { width: "76%", duration: 1.7, ease: "power2.out" }, 0.9);
|
||||
tl.to(
|
||||
tempCounter,
|
||||
{
|
||||
value: 25,
|
||||
duration: 2.2,
|
||||
ease: "power2.out",
|
||||
onUpdate: function () {
|
||||
tempValue.textContent = Math.round(tempCounter.value);
|
||||
},
|
||||
},
|
||||
0.9,
|
||||
);
|
||||
tl.fromTo(
|
||||
[scg, sct],
|
||||
{ top: 340 },
|
||||
{ top: 500, duration: 3.0, ease: "power2.inOut", yoyo: true, repeat: 1 },
|
||||
0,
|
||||
);
|
||||
tl.fromTo(
|
||||
[scg, sct],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=40", duration: 1.8, ease: "sine.inOut", yoyo: true, repeat: 3 },
|
||||
0.5,
|
||||
);
|
||||
|
||||
/* ── Pills: float upward then drift sideways ── */
|
||||
/* Pill 1 */
|
||||
tl.fromTo(
|
||||
[p1g, p1t],
|
||||
{ left: 400, top: 780 },
|
||||
{ left: 400, top: 620, duration: 2, ease: "power2.out" },
|
||||
0,
|
||||
tl.to("#battery-fill", { width: "91%", duration: 2.4, ease: "power2.out" }, 1.05);
|
||||
tl.to(
|
||||
batteryCounter,
|
||||
{
|
||||
value: 91,
|
||||
duration: 2.4,
|
||||
ease: "power2.out",
|
||||
onUpdate: function () {
|
||||
batteryValue.textContent = Math.round(batteryCounter.value);
|
||||
},
|
||||
},
|
||||
1.05,
|
||||
);
|
||||
tl.to(
|
||||
[p1g, p1t],
|
||||
{ left: 250, top: 680, duration: 6, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
2,
|
||||
stepsCounter,
|
||||
{
|
||||
value: 9.1,
|
||||
duration: 2.6,
|
||||
ease: "power2.out",
|
||||
onUpdate: function () {
|
||||
var degrees = Math.round(stepsCounter.value * 31.4);
|
||||
stepsValue.textContent = stepsCounter.value.toFixed(1) + "K";
|
||||
stepsRing.style.background =
|
||||
"conic-gradient(#a78bfa 0deg, #06e3fa " +
|
||||
degrees +
|
||||
"deg, rgba(255, 255, 255, 0.18) " +
|
||||
degrees +
|
||||
"deg)";
|
||||
},
|
||||
},
|
||||
1.2,
|
||||
);
|
||||
tl.fromTo(
|
||||
[p1g, p1t],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=35", duration: 1.6, ease: "sine.inOut", yoyo: true, repeat: 4 },
|
||||
0.3,
|
||||
tl.to("#showcase-progress", { width: "92%", duration: 4.1, ease: "none" }, 1.2);
|
||||
tl.to(
|
||||
"#showcase-dot",
|
||||
{ scale: 1.5, duration: 0.25, ease: "power2.out", yoyo: true, repeat: 7 },
|
||||
1.4,
|
||||
);
|
||||
|
||||
/* Pill 2 */
|
||||
tl.fromTo(
|
||||
[p2g, p2t],
|
||||
{ left: 700, top: 800 },
|
||||
{ left: 700, top: 650, duration: 2.2, ease: "back.out(1.4)" },
|
||||
0,
|
||||
tl.call(
|
||||
function () {
|
||||
showcaseStatus.textContent = "Preview ready";
|
||||
},
|
||||
null,
|
||||
5.2,
|
||||
);
|
||||
tl.to(
|
||||
[p2g, p2t],
|
||||
{ left: 900, top: 700, duration: 5.8, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
[scg, sct],
|
||||
{ top: "-=10", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
5.2,
|
||||
);
|
||||
tl.to(
|
||||
".pill-dot",
|
||||
{ scale: 1.55, duration: 0.2, ease: "power2.out", stagger: 0.12, yoyo: true, repeat: 3 },
|
||||
2.2,
|
||||
);
|
||||
tl.fromTo(
|
||||
[p2g, p2t],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=30", duration: 1.4, ease: "sine.inOut", yoyo: true, repeat: 4 },
|
||||
0.6,
|
||||
);
|
||||
|
||||
/* Pill 3 */
|
||||
tl.fromTo(
|
||||
[p3g, p3t],
|
||||
{ left: 1000, top: 820 },
|
||||
{ left: 1000, top: 640, duration: 1.8, ease: "expo.out" },
|
||||
0,
|
||||
);
|
||||
tl.to(
|
||||
[p3g, p3t],
|
||||
{ left: 1250, top: 690, duration: 6.2, ease: "sine.inOut", yoyo: true, repeat: 1 },
|
||||
1.8,
|
||||
);
|
||||
tl.fromTo(
|
||||
[p3g, p3t],
|
||||
{ top: "+=0" },
|
||||
{ top: "+=28", duration: 1.3, ease: "sine.inOut", yoyo: true, repeat: 5 },
|
||||
0.1,
|
||||
[s1g, s1t, s2g, s2t, s3g, s3t],
|
||||
{ top: "-=12", duration: 0.2, ease: "power2.out", yoyo: true, repeat: 1 },
|
||||
5.7,
|
||||
);
|
||||
tl.to(allPanels, { top: "+=760", duration: 0.42, ease: "power2.in" }, 6.74);
|
||||
|
||||
/* Duration driver */
|
||||
tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: "none" }, 0);
|
||||
|
||||
tl.eventCallback("onUpdate", function () {
|
||||
renderGlass(tl.time());
|
||||
requestGlassRender(tl.time());
|
||||
});
|
||||
|
||||
window.__timelines["liquid-glass-widgets"] = tl;
|
||||
|
||||
setTimeout(function () {
|
||||
renderGlass(0);
|
||||
}, 0);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,12 +10,17 @@
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 8,
|
||||
"tags": ["liquid-glass-html-in-canvas", "webgpu"],
|
||||
"tags": ["html-in-canvas", "liquid-glass-html-in-canvas", "webgpu"],
|
||||
"files": [
|
||||
{
|
||||
"path": "liquid-glass-widgets.html",
|
||||
"target": "compositions/liquid-glass-widgets.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "assets/hyperframes-logo-dark.svg",
|
||||
"target": "compositions/assets/hyperframes-logo-dark.svg",
|
||||
"type": "registry:asset"
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
+598
-150
@@ -25,6 +25,268 @@
|
||||
overflow: hidden;
|
||||
background: #050508;
|
||||
}
|
||||
.tahoe-desktop {
|
||||
position: relative;
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 18% 20%, rgba(109, 40, 217, 0.56), transparent 24%),
|
||||
radial-gradient(circle at 78% 34%, rgba(14, 165, 233, 0.5), transparent 26%),
|
||||
radial-gradient(circle at 70% 86%, rgba(245, 158, 11, 0.46), transparent 28%),
|
||||
linear-gradient(145deg, #150527 0%, #07243f 38%, #0e7490 62%, #be185d 100%);
|
||||
color: #fff;
|
||||
}
|
||||
.tahoe-menu-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
height: 32px;
|
||||
padding: 6px 20px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(22px);
|
||||
}
|
||||
.tahoe-stage {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 26px;
|
||||
height: 650px;
|
||||
}
|
||||
.tahoe-window {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 520px;
|
||||
margin: 38px 0 0 76px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 16px;
|
||||
background: rgba(21, 25, 36, 0.68);
|
||||
box-shadow:
|
||||
0 24px 70px rgba(0, 0, 0, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
.tahoe-window-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 42px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
.tahoe-traffic-light {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.tahoe-finder-body {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 478px;
|
||||
}
|
||||
.tahoe-sidebar {
|
||||
width: 210px;
|
||||
padding: 14px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
font-size: 12px;
|
||||
}
|
||||
.tahoe-sidebar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
.tahoe-sidebar-row.active {
|
||||
background: rgba(0, 122, 255, 0.28);
|
||||
color: #cdeeff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tahoe-sidebar-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.tahoe-file-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px 12px;
|
||||
align-content: start;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
.tahoe-file {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.tahoe-folder-icon,
|
||||
.tahoe-document-icon {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 42px;
|
||||
margin: 0 auto 8px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #77caff 0%, #1d8dff 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
0 10px 20px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
.tahoe-folder-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 6px;
|
||||
width: 26px;
|
||||
height: 12px;
|
||||
border-radius: 7px 7px 2px 2px;
|
||||
background: linear-gradient(180deg, #9ad8ff 0%, #3ca2ff 100%);
|
||||
}
|
||||
.tahoe-document-icon {
|
||||
width: 40px;
|
||||
height: 52px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #cfd8e6 100%);
|
||||
}
|
||||
.tahoe-document-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
width: 22px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: #7b8796;
|
||||
box-shadow:
|
||||
0 9px 0 #9aa5b2,
|
||||
0 18px 0 #b2bcc8;
|
||||
}
|
||||
.tahoe-file-label {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 11px;
|
||||
line-height: 1.15;
|
||||
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
.tahoe-glass-stack {
|
||||
display: none;
|
||||
}
|
||||
.tahoe-glass-panel {
|
||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),
|
||||
rgba(10, 14, 24, 0.78);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.32),
|
||||
0 20px 54px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
.tahoe-notification {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
min-height: 92px;
|
||||
padding: 14px;
|
||||
}
|
||||
.tahoe-notification img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.tahoe-panel-title {
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.tahoe-panel-subtitle {
|
||||
margin-top: 4px;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.tahoe-control-center {
|
||||
padding: 14px;
|
||||
}
|
||||
.tahoe-toggle-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.tahoe-toggle {
|
||||
min-height: 48px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.tahoe-toggle.active {
|
||||
background: linear-gradient(135deg, rgba(0, 122, 255, 0.9), rgba(52, 211, 153, 0.68));
|
||||
}
|
||||
.tahoe-slider {
|
||||
height: 12px;
|
||||
margin-top: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
overflow: hidden;
|
||||
}
|
||||
.tahoe-slider::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 72%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #a7f3d0, #38bdf8, #c084fc);
|
||||
}
|
||||
.tahoe-media {
|
||||
padding: 14px;
|
||||
}
|
||||
.tahoe-media-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.tahoe-album {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #ec4899, #f59e0b 48%, #38bdf8);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.tahoe-dock {
|
||||
width: 612px;
|
||||
margin: 22px auto 0;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.24);
|
||||
border-radius: 24px;
|
||||
background: rgba(255, 255, 255, 0.17);
|
||||
box-shadow:
|
||||
0 18px 46px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
.tahoe-dock-icon {
|
||||
display: block;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
object-fit: cover;
|
||||
border-radius: 13px;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -168,51 +430,124 @@
|
||||
color: #e2e8f0;
|
||||
"
|
||||
>
|
||||
<div id="laptop-scroll" style="width:1440px;height:900px;background:linear-gradient(160deg,#1a0533 0%,#0a2540 25%,#0ea5e9 50%,#ec4899 75%,#f59e0b 100%);color:#fff;transform:translateY(0)">
|
||||
<div id="laptop-title" style="display:none"></div><span id="laptop-count" style="display:none"></span><div id="laptop-cards" style="display:none"></div>
|
||||
<div id="laptop-scroll" class="tahoe-desktop" style="transform: translateY(0)">
|
||||
<div id="laptop-title" style="display: none"></div>
|
||||
<span id="laptop-count" style="display: none"></span>
|
||||
<div id="laptop-cards" style="display: none"></div>
|
||||
<!-- Menu Bar -->
|
||||
<div style="display:flex;align-items:center;padding:6px 20px;background:rgba(40,40,50,0.7);font-size:13px;font-weight:500;gap:20px;height:32px;">
|
||||
<span style="font-weight:800;font-size:15px;"></span>
|
||||
<span style="font-weight:600;">Finder</span>
|
||||
<span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span><span>Help</span>
|
||||
<div class="tahoe-menu-bar">
|
||||
<span style="font-weight: 800; font-size: 15px"></span>
|
||||
<span style="font-weight: 600">Finder</span>
|
||||
<span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span
|
||||
><span>Help</span>
|
||||
<div style="flex: 1"></div>
|
||||
<span style="font-size:11px;">🔋 92%</span>
|
||||
<span style="font-size:11px;">📶</span>
|
||||
<span style="font-size:11px;font-variant-numeric:tabular-nums;">Fri 15:16</span>
|
||||
<span style="font-size: 11px">92%</span>
|
||||
<span style="font-size: 11px">Wi-Fi</span>
|
||||
<span style="font-size: 11px; font-variant-numeric: tabular-nums">Fri 15:16</span>
|
||||
</div>
|
||||
<!-- Finder Window (using margin instead of absolute) -->
|
||||
<div style="margin:40px 180px 0;width:900px;height:550px;border-radius:12px;background:rgba(30,30,40,0.75);border:1px solid rgba(255,255,255,0.12);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.4);">
|
||||
<div style="display:flex;align-items:center;padding:10px 14px;background:rgba(50,50,60,0.6);gap:8px;border-bottom:1px solid rgba(255,255,255,0.08);">
|
||||
<span style="width:12px;height:12px;border-radius:50%;background:#FF5F57;display:inline-block;"></span>
|
||||
<span style="width:12px;height:12px;border-radius:50%;background:#FEBC2E;display:inline-block;"></span>
|
||||
<span style="width:12px;height:12px;border-radius:50%;background:#28C840;display:inline-block;"></span>
|
||||
<span style="flex:1;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,0.7);">HyperFrames</span>
|
||||
<div class="tahoe-stage">
|
||||
<div class="tahoe-window">
|
||||
<div class="tahoe-window-titlebar">
|
||||
<span class="tahoe-traffic-light" style="background: #ff5f57"></span>
|
||||
<span class="tahoe-traffic-light" style="background: #febc2e"></span>
|
||||
<span class="tahoe-traffic-light" style="background: #28c840"></span>
|
||||
<span
|
||||
style="
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
"
|
||||
>HyperFrames</span
|
||||
>
|
||||
</div>
|
||||
<div style="display:flex;height:510px;">
|
||||
<div style="width:200px;padding:14px;border-right:1px solid rgba(255,255,255,0.08);font-size:12px;">
|
||||
<div style="padding:6px 10px;border-radius:6px;background:rgba(0,122,255,0.3);color:#5AC8FA;font-weight:600;margin-bottom:6px;">📁 Favorites</div>
|
||||
<div style="padding:6px 10px;color:rgba(255,255,255,0.5);">🏠 Home</div>
|
||||
<div style="padding:6px 10px;color:rgba(255,255,255,0.5);">💻 Desktop</div>
|
||||
<div style="padding:6px 10px;color:rgba(255,255,255,0.5);">📥 Downloads</div>
|
||||
<div style="padding:6px 10px;color:rgba(255,255,255,0.5);">📄 Documents</div>
|
||||
<div style="padding:6px 10px;color:rgba(255,255,255,0.5);">☁ iCloud</div>
|
||||
<div id="macos-finder-body" class="tahoe-finder-body">
|
||||
<div class="tahoe-sidebar">
|
||||
<div class="tahoe-sidebar-row active">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/finder.png" alt="" />
|
||||
Favorites
|
||||
</div>
|
||||
<div style="flex:1;padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-content:start;">
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">packages</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">registry</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">docs</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">skills</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📄</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">CLAUDE.md</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📄</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">package.json</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">playground</div></div>
|
||||
<div style="text-align:center;padding:10px;"><div style="font-size:36px;">📁</div><div style="font-size:11px;color:rgba(255,255,255,0.6);margin-top:6px;">scripts</div></div>
|
||||
<div class="tahoe-sidebar-row">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/files.jpg" alt="" />
|
||||
Home
|
||||
</div>
|
||||
<div class="tahoe-sidebar-row">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/safari.jpg" alt="" />
|
||||
Desktop
|
||||
</div>
|
||||
<div class="tahoe-sidebar-row">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/mail.jpg" alt="" />
|
||||
Downloads
|
||||
</div>
|
||||
<div class="tahoe-sidebar-row">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/photos.jpg" alt="" />
|
||||
Pictures
|
||||
</div>
|
||||
<div class="tahoe-sidebar-row">
|
||||
<img class="tahoe-sidebar-icon" src="assets/icons/music.jpg" alt="" />
|
||||
Music
|
||||
</div>
|
||||
</div>
|
||||
<div class="tahoe-file-grid">
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">packages</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">registry</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">docs</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">skills</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-document-icon"></div>
|
||||
<div class="tahoe-file-label">AGENTS.md</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-document-icon"></div>
|
||||
<div class="tahoe-file-label">package.json</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">playground</div>
|
||||
</div>
|
||||
<div class="tahoe-file">
|
||||
<div class="tahoe-folder-icon"></div>
|
||||
<div class="tahoe-file-label">scripts</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tahoe-dock">
|
||||
<img class="tahoe-dock-icon" src="assets/icons/dock-finder.png" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/dock-safari.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/dock-mail.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/calendar.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/dock-photos.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/messages.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/dock-music.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/brave.jpg" alt="" />
|
||||
<img class="tahoe-dock-icon" src="assets/icons/slack.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</canvas>
|
||||
|
||||
<img
|
||||
id="mac-toast-source"
|
||||
src="assets/icons/toast-messages.jpg"
|
||||
alt=""
|
||||
style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
|
||||
/>
|
||||
|
||||
<canvas
|
||||
id="theater"
|
||||
width="1920"
|
||||
@@ -277,24 +612,26 @@
|
||||
eT.dispose();
|
||||
pm.dispose();
|
||||
|
||||
// ── Background ─────────────────────────────────────────────────────
|
||||
scene.add(
|
||||
new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(22, 14),
|
||||
// ── Three.js shader backdrop ────────────────────────────────────────
|
||||
var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };
|
||||
var bgPlane = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(28, 16),
|
||||
new THREE.ShaderMaterial({
|
||||
uniforms: {},
|
||||
uniforms: bgUniforms,
|
||||
vertexShader:
|
||||
"varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}",
|
||||
fragmentShader:
|
||||
"varying vec2 v;void main(){vec3 c=vec3(0.02,0.02,0.03);c+=vec3(0.05,0.02,0.1)*exp(-pow(length(v-vec2(0.3,0.55)),2.0)*5.0);c+=vec3(0.02,0.05,0.1)*exp(-pow(length(v-vec2(0.7,0.45)),2.0)*5.0);gl_FragColor=vec4(c,1.0);}",
|
||||
"uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}",
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
}),
|
||||
),
|
||||
).position.z = -6;
|
||||
);
|
||||
bgPlane.position.z = -7.5;
|
||||
scene.add(bgPlane);
|
||||
|
||||
var floor = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(30, 30),
|
||||
new THREE.MeshStandardMaterial({ color: 0x050508, metalness: 0.95, roughness: 0.18 }),
|
||||
new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.9, roughness: 0.2 }),
|
||||
);
|
||||
floor.rotation.x = -PI / 2;
|
||||
floor.position.y = -2.5;
|
||||
@@ -315,12 +652,10 @@
|
||||
var capPhoneCvs = document.getElementById("cap-phone");
|
||||
var capPhoneCtx = capPhoneCvs.getContext("2d");
|
||||
var phoneHtmlEl = document.getElementById("phone-html");
|
||||
var phoneScrollEl = document.getElementById("phone-scroll");
|
||||
|
||||
var capLapCvs = document.getElementById("cap-laptop");
|
||||
var capLapCtx = capLapCvs.getContext("2d");
|
||||
var lapHtmlEl = document.getElementById("laptop-html");
|
||||
var lapScrollEl = document.getElementById("laptop-scroll");
|
||||
|
||||
var apiOk = (function () {
|
||||
var tc = document.createElement("canvas");
|
||||
@@ -331,6 +666,38 @@
|
||||
})();
|
||||
var paintReady = false;
|
||||
|
||||
function waitForImages() {
|
||||
var images = Array.prototype.slice.call(document.querySelectorAll("img"));
|
||||
return Promise.all(
|
||||
images.map(function (image) {
|
||||
if (image.complete) return Promise.resolve();
|
||||
return new Promise(function (resolveImage) {
|
||||
image.onload = resolveImage;
|
||||
image.onerror = resolveImage;
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function waitForPaint(canvas) {
|
||||
return new Promise(function (resolvePaint) {
|
||||
if (!canvas || typeof canvas.requestPaint !== "function") {
|
||||
resolvePaint();
|
||||
return;
|
||||
}
|
||||
var resolved = false;
|
||||
function done() {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
canvas.onpaint = null;
|
||||
resolvePaint();
|
||||
}
|
||||
canvas.onpaint = done;
|
||||
canvas.requestPaint();
|
||||
setTimeout(done, 100);
|
||||
});
|
||||
}
|
||||
|
||||
// Generate card HTML for both screens
|
||||
var cardData = [
|
||||
{
|
||||
@@ -429,6 +796,163 @@
|
||||
lapTex.minFilter = THREE.LinearFilter;
|
||||
lapTex.magFilter = THREE.LinearFilter;
|
||||
lapTex.generateMipmaps = false;
|
||||
var macToastIcon = document.getElementById("mac-toast-source");
|
||||
|
||||
function roundedRect(ctx, x, y, w, h, r) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y);
|
||||
ctx.quadraticCurveTo(x + w, y, x + w, y + r);
|
||||
ctx.lineTo(x + w, y + h - r);
|
||||
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
||||
ctx.lineTo(x + r, y + h);
|
||||
ctx.quadraticCurveTo(x, y + h, x, y + h - r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.quadraticCurveTo(x, y, x + r, y);
|
||||
ctx.closePath();
|
||||
}
|
||||
|
||||
function drawGlassPanel(ctx, x, y, w, h, r) {
|
||||
var g = ctx.createLinearGradient(x, y, x + w, y + h);
|
||||
g.addColorStop(0, "rgba(255,255,255,0.42)");
|
||||
g.addColorStop(0.48, "rgba(255,255,255,0.18)");
|
||||
g.addColorStop(1, "rgba(11,16,28,0.76)");
|
||||
ctx.save();
|
||||
ctx.shadowColor = "rgba(0,0,0,0.34)";
|
||||
ctx.shadowBlur = 28;
|
||||
ctx.shadowOffsetY = 18;
|
||||
roundedRect(ctx, x, y, w, h, r);
|
||||
ctx.fillStyle = g;
|
||||
ctx.fill();
|
||||
ctx.shadowColor = "transparent";
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.42)";
|
||||
ctx.stroke();
|
||||
roundedRect(ctx, x + 1, y + 1, w - 2, h - 2, r - 1);
|
||||
ctx.strokeStyle = "rgba(255,255,255,0.16)";
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function drawFinderWindow(ctx) {
|
||||
drawGlassPanel(ctx, 96, 78, 704, 508, 18);
|
||||
roundedRect(ctx, 96, 78, 704, 44, 18);
|
||||
ctx.fillStyle = "rgba(255,255,255,0.22)";
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "#ff5f57";
|
||||
ctx.beginPath();
|
||||
ctx.arc(122, 100, 7, 0, PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "#febc2e";
|
||||
ctx.beginPath();
|
||||
ctx.arc(144, 100, 7, 0, PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "#28c840";
|
||||
ctx.beginPath();
|
||||
ctx.arc(166, 100, 7, 0, PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "rgba(255,255,255,0.86)";
|
||||
ctx.font = "800 14px Inter, system-ui, sans-serif";
|
||||
ctx.fillText("HyperFrames", 408, 94);
|
||||
|
||||
ctx.fillStyle = "rgba(255,255,255,0.14)";
|
||||
ctx.fillRect(96, 122, 188, 464);
|
||||
var sidebar = ["Favorites", "Home", "Desktop", "Downloads", "Pictures", "Music"];
|
||||
for (var si = 0; si < sidebar.length; si++) {
|
||||
var sy = 148 + si * 34;
|
||||
if (si === 0) {
|
||||
roundedRect(ctx, 112, sy - 7, 150, 24, 7);
|
||||
ctx.fillStyle = "rgba(0,122,255,0.32)";
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.fillStyle = "rgba(255,255,255,0.82)";
|
||||
ctx.font =
|
||||
si === 0
|
||||
? "800 12px Inter, system-ui, sans-serif"
|
||||
: "700 12px Inter, system-ui, sans-serif";
|
||||
ctx.fillText(sidebar[si], 132, sy);
|
||||
}
|
||||
|
||||
var files = [
|
||||
"packages",
|
||||
"registry",
|
||||
"docs",
|
||||
"skills",
|
||||
"AGENTS.md",
|
||||
"package.json",
|
||||
"playground",
|
||||
"scripts",
|
||||
];
|
||||
for (var fi = 0; fi < files.length; fi++) {
|
||||
var fx = 340 + (fi % 4) * 102;
|
||||
var fy = 164 + Math.floor(fi / 4) * 132;
|
||||
roundedRect(ctx, fx, fy, 54, 42, 10);
|
||||
ctx.fillStyle = fi === 4 || fi === 5 ? "rgba(255,255,255,0.72)" : "rgba(83,180,255,0.78)";
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "rgba(255,255,255,0.88)";
|
||||
ctx.font = "800 11px Inter, system-ui, sans-serif";
|
||||
ctx.fillText(files[fi], fx - 18, fy + 58);
|
||||
}
|
||||
}
|
||||
|
||||
function drawMacGlassOverlay(ctx) {
|
||||
ctx.save();
|
||||
drawFinderWindow(ctx);
|
||||
ctx.textBaseline = "top";
|
||||
ctx.fillStyle = "rgba(255,255,255,0.96)";
|
||||
ctx.font = "800 18px Inter, system-ui, sans-serif";
|
||||
|
||||
drawGlassPanel(ctx, 820, 118, 330, 92, 26);
|
||||
if (macToastIcon && macToastIcon.complete) {
|
||||
ctx.save();
|
||||
roundedRect(ctx, 840, 140, 44, 44, 12);
|
||||
ctx.clip();
|
||||
ctx.drawImage(macToastIcon, 840, 140, 44, 44);
|
||||
ctx.restore();
|
||||
}
|
||||
ctx.fillText("Messages", 900, 134);
|
||||
ctx.font = "700 13px Inter, system-ui, sans-serif";
|
||||
ctx.fillStyle = "rgba(255,255,255,0.78)";
|
||||
ctx.fillText("Preview ready. Glass panels", 900, 160);
|
||||
ctx.fillText("are inside the Mac display.", 900, 178);
|
||||
|
||||
drawGlassPanel(ctx, 820, 226, 330, 150, 28);
|
||||
ctx.fillStyle = "rgba(255,255,255,0.96)";
|
||||
ctx.font = "800 18px Inter, system-ui, sans-serif";
|
||||
ctx.fillText("Control Center", 842, 246);
|
||||
var labels = ["Wi-Fi", "Bluetooth", "Focus", "AirDrop"];
|
||||
for (var ti = 0; ti < labels.length; ti++) {
|
||||
var tx = 842 + (ti % 2) * 150;
|
||||
var ty = 282 + Math.floor(ti / 2) * 42;
|
||||
roundedRect(ctx, tx, ty, 132, 32, 14);
|
||||
ctx.fillStyle = ti < 2 ? "rgba(61,172,255,0.72)" : "rgba(255,255,255,0.16)";
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "rgba(255,255,255,0.9)";
|
||||
ctx.font = "800 12px Inter, system-ui, sans-serif";
|
||||
ctx.fillText(labels[ti], tx + 14, ty + 9);
|
||||
}
|
||||
roundedRect(ctx, 842, 358, 258, 8, 4);
|
||||
ctx.fillStyle = "rgba(255,255,255,0.2)";
|
||||
ctx.fill();
|
||||
roundedRect(ctx, 842, 358, 186, 8, 4);
|
||||
var slider = ctx.createLinearGradient(842, 358, 1028, 358);
|
||||
slider.addColorStop(0, "#a7f3d0");
|
||||
slider.addColorStop(0.55, "#38bdf8");
|
||||
slider.addColorStop(1, "#c084fc");
|
||||
ctx.fillStyle = slider;
|
||||
ctx.fill();
|
||||
|
||||
drawGlassPanel(ctx, 820, 392, 330, 94, 26);
|
||||
ctx.fillStyle = "rgba(255,255,255,0.96)";
|
||||
ctx.font = "800 18px Inter, system-ui, sans-serif";
|
||||
ctx.fillText("Now Playing", 842, 412);
|
||||
ctx.font = "800 15px Inter, system-ui, sans-serif";
|
||||
ctx.fillText("Liquid Shader", 842, 440);
|
||||
ctx.font = "700 12px Inter, system-ui, sans-serif";
|
||||
ctx.fillStyle = "rgba(255,255,255,0.78)";
|
||||
ctx.fillText("HyperFrames preview mix", 842, 462);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function captureScreens() {
|
||||
if (!apiOk || !paintReady) return;
|
||||
@@ -437,6 +961,7 @@
|
||||
capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);
|
||||
capLapCtx.clearRect(0, 0, 1440, 900);
|
||||
capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);
|
||||
drawMacGlassOverlay(capLapCtx);
|
||||
phoneTex.needsUpdate = true;
|
||||
lapTex.needsUpdate = true;
|
||||
} catch (e) {}
|
||||
@@ -458,58 +983,6 @@
|
||||
var loader = new THREE.GLTFLoader();
|
||||
loader.setDRACOLoader(draco);
|
||||
|
||||
// ── Morphing Glass Lens (single, shared between devices) ───────────
|
||||
var glassMat = new THREE.MeshPhysicalMaterial({
|
||||
color: 0xffffff,
|
||||
metalness: 0,
|
||||
roughness: 0.02,
|
||||
transmission: 1,
|
||||
thickness: 1.8,
|
||||
ior: 1.45,
|
||||
attenuationColor: new THREE.Color(0xe8f4ff),
|
||||
attenuationDistance: 10,
|
||||
clearcoat: 1,
|
||||
clearcoatRoughness: 0.03,
|
||||
specularIntensity: 1,
|
||||
envMapIntensity: 2.5,
|
||||
transparent: true,
|
||||
opacity: 0.85,
|
||||
side: THREE.DoubleSide,
|
||||
});
|
||||
|
||||
var glassGeos = [
|
||||
new THREE.SphereGeometry(0.22, 32, 32),
|
||||
new THREE.IcosahedronGeometry(0.22, 1),
|
||||
new THREE.OctahedronGeometry(0.25, 0),
|
||||
new THREE.DodecahedronGeometry(0.22, 0),
|
||||
new THREE.TetrahedronGeometry(0.28, 0),
|
||||
new THREE.TorusGeometry(0.16, 0.07, 16, 32),
|
||||
];
|
||||
var glassLens = new THREE.Mesh(glassGeos[0], glassMat);
|
||||
glassLens.renderOrder = 10;
|
||||
|
||||
// iPhone
|
||||
loader.load("models/iphone.glb", function (gltf) {
|
||||
var m = gltf.scene;
|
||||
var box = new THREE.Box3().setFromObject(m);
|
||||
var sz = box.getSize(new THREE.Vector3());
|
||||
var s = 3.2 / sz.y;
|
||||
m.scale.setScalar(s);
|
||||
box.setFromObject(m);
|
||||
m.position.sub(box.getCenter(new THREE.Vector3()));
|
||||
m.traverse(function (child) {
|
||||
if (!child.isMesh) return;
|
||||
if (child.material && child.material.emissiveMap) {
|
||||
child.material = new THREE.MeshBasicMaterial({ map: phoneTex });
|
||||
}
|
||||
});
|
||||
scene.add(glassLens);
|
||||
|
||||
phoneGrp.add(m);
|
||||
ready++;
|
||||
if (ready === 2) onReady();
|
||||
});
|
||||
|
||||
// MacBook
|
||||
loader.load("models/macbook.glb", function (gltf) {
|
||||
var m = gltf.scene;
|
||||
@@ -562,17 +1035,18 @@
|
||||
|
||||
lapGrp.add(m);
|
||||
ready++;
|
||||
if (ready === 2) onReady();
|
||||
if (ready === 1) onReady();
|
||||
});
|
||||
|
||||
function onReady() {
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () {
|
||||
waitForImages()
|
||||
.then(function () {
|
||||
return waitForPaint(capLapCvs);
|
||||
})
|
||||
.then(function () {
|
||||
paintReady = true;
|
||||
captureScreens();
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["macos-tahoe-liquid-glass"] = tl;
|
||||
});
|
||||
render();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -625,10 +1099,11 @@
|
||||
clZ: 0,
|
||||
drift: 0,
|
||||
turn: 0,
|
||||
scroll: 0,
|
||||
cardReveal: 0,
|
||||
titleFade: 0,
|
||||
counter: 0,
|
||||
macToast: 0,
|
||||
macPanel: 0,
|
||||
p: 0,
|
||||
};
|
||||
|
||||
@@ -650,9 +1125,21 @@
|
||||
allCards[ci2].style.opacity = cardProgress;
|
||||
allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
|
||||
}
|
||||
// Scroll
|
||||
phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
|
||||
lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
|
||||
var macToast = document.getElementById("mac-toast");
|
||||
var macControl = document.getElementById("mac-control");
|
||||
var macMedia = document.getElementById("mac-media");
|
||||
if (macToast) {
|
||||
macToast.style.opacity = 0.42 + S.macToast * 0.58;
|
||||
macToast.style.transform = "translateY(" + (1 - S.macToast) * 14 + "px)";
|
||||
}
|
||||
if (macControl) {
|
||||
macControl.style.opacity = 0.5 + S.macPanel * 0.5;
|
||||
macControl.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
|
||||
}
|
||||
if (macMedia) {
|
||||
macMedia.style.opacity = 0.55 + S.macPanel * 0.45;
|
||||
macMedia.style.transform = "translateY(" + (1 - S.macPanel) * 18 + "px)";
|
||||
}
|
||||
// Re-capture HTML to texture
|
||||
captureScreens();
|
||||
|
||||
@@ -669,48 +1156,16 @@
|
||||
);
|
||||
lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);
|
||||
turntable.rotation.y = S.turn;
|
||||
// Single morphing glass — orbits around device edges, never overlaps screen
|
||||
var t = tl.time();
|
||||
var geoIdx = Math.floor(d * 0.8) % glassGeos.length;
|
||||
if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];
|
||||
glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);
|
||||
|
||||
// Glass glides across screen surface — hide during rotations to avoid clipping
|
||||
glassLens.visible = t < 3.3 || (t >= 9.5 && t < 12.5) || t >= 13.5;
|
||||
var gx, gy, gz;
|
||||
if (t < 7) {
|
||||
// Slide across iPhone screen face
|
||||
var px = phoneGrp.position.x,
|
||||
py = phoneGrp.position.y,
|
||||
pz = phoneGrp.position.z;
|
||||
gx = px + Math.sin(d * 1.4) * 0.35;
|
||||
gy = py + Math.cos(d * 1.1) * 0.6;
|
||||
gz = pz + 0.15;
|
||||
} else if (t < 11) {
|
||||
// Slide across MacBook screen face
|
||||
var lx2 = lapGrp.position.x,
|
||||
ly2 = lapGrp.position.y,
|
||||
lz2 = lapGrp.position.z;
|
||||
gx = lx2 + Math.sin(d * 1.2) * 1.2;
|
||||
gy = ly2 + 0.3 + Math.cos(d * 0.9) * 0.6;
|
||||
gz = lz2 + 0.2;
|
||||
} else {
|
||||
// Glide between both screens
|
||||
var mx = (phoneGrp.position.x + lapGrp.position.x) * 0.5;
|
||||
var my = (phoneGrp.position.y + lapGrp.position.y) * 0.5;
|
||||
gx = mx + Math.sin(d * 1.0) * 1.5;
|
||||
gy = my + 0.2 + Math.cos(d * 0.8) * 0.5;
|
||||
gz = 0.3;
|
||||
}
|
||||
glassLens.position.set(gx, gy, gz);
|
||||
bgUniforms.uTime.value = d;
|
||||
camera.position.set(S.cX, S.cY, S.cZ);
|
||||
camera.lookAt(S.clX, S.clY, S.clZ);
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
// ── GSAP Timeline — Product Review Edit ────────────────────────────
|
||||
// __timelines created in onReady() after GLTF models load
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
window.__timelines = window.__timelines || {};
|
||||
window.__timelines["macos-tahoe-liquid-glass"] = tl;
|
||||
|
||||
tl.to(S, { p: 1, drift: 15, duration: 15, ease: "none", onUpdate: render }, 0);
|
||||
|
||||
@@ -736,14 +1191,7 @@
|
||||
tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);
|
||||
// Cards stagger in (0→1 reveals all cards sequentially)
|
||||
tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);
|
||||
// Scroll during hero shots
|
||||
tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);
|
||||
tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);
|
||||
// Scroll on MacBook reveal
|
||||
tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);
|
||||
tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);
|
||||
|
||||
// __timelines registered in onReady() after GLTF models load
|
||||
tl.to(S, { macToast: 1, macPanel: 1, duration: 1.1, ease: breatheEase }, 0.45);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "macos-tahoe-liquid-glass",
|
||||
"type": "hyperframes:block",
|
||||
"title": "macOS Tahoe Liquid Glass Desktop",
|
||||
"description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
|
||||
"stability": "experimental",
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 15,
|
||||
"tags": ["html-in-canvas", "3d", "macos", "tahoe", "gltf"],
|
||||
"files": [
|
||||
{
|
||||
"path": "macos-tahoe-liquid-glass.html",
|
||||
"target": "compositions/macos-tahoe-liquid-glass.html",
|
||||
"type": "hyperframes:composition"
|
||||
},
|
||||
{
|
||||
"path": "models/macbook.glb",
|
||||
"target": "models/macbook.glb",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/finder.png",
|
||||
"target": "assets/icons/finder.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/safari.jpg",
|
||||
"target": "assets/icons/safari.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/mail.jpg",
|
||||
"target": "assets/icons/mail.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/calendar.jpg",
|
||||
"target": "assets/icons/calendar.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/photos.jpg",
|
||||
"target": "assets/icons/photos.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/messages.jpg",
|
||||
"target": "assets/icons/messages.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/toast-messages.jpg",
|
||||
"target": "assets/icons/toast-messages.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/music.jpg",
|
||||
"target": "assets/icons/music.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/brave.jpg",
|
||||
"target": "assets/icons/brave.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/slack.jpg",
|
||||
"target": "assets/icons/slack.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/files.jpg",
|
||||
"target": "assets/icons/files.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/dock-finder.png",
|
||||
"target": "assets/icons/dock-finder.png",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/dock-safari.jpg",
|
||||
"target": "assets/icons/dock-safari.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/dock-mail.jpg",
|
||||
"target": "assets/icons/dock-mail.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/dock-photos.jpg",
|
||||
"target": "assets/icons/dock-photos.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
},
|
||||
{
|
||||
"path": "assets/icons/dock-music.jpg",
|
||||
"target": "assets/icons/dock-music.jpg",
|
||||
"type": "hyperframes:asset"
|
||||
}
|
||||
],
|
||||
"preview": {
|
||||
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4",
|
||||
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
|
||||
}
|
||||
}
|
||||
@@ -343,6 +343,30 @@
|
||||
"name": "vfx-liquid-glass",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-notification",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-context-menu",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-media-controls",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "liquid-glass-widgets",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "ios26-liquid-glass",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "macos-tahoe-liquid-glass",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "vfx-shatter",
|
||||
"type": "hyperframes:block"
|
||||
|
||||
Reference in New Issue
Block a user