mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-03 12:17:03 +00:00
github-actions[bot]
faa4913c9e
* chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog * chore(catalog): publish generated catalog --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
105 lines
2.9 KiB
Plaintext
105 lines
2.9 KiB
Plaintext
---
|
||
title: "Strands"
|
||
description: "Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT)."
|
||
mode: "frame"
|
||
---
|
||
|
||
import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx";
|
||
import { InstallCommand } from "/snippets/install-command.jsx";
|
||
|
||
<CatalogDetail
|
||
previewSrc="/public/catalog/blocks/strands.json"
|
||
compositionId="strands"
|
||
compositionSrc="compositions/strands.html"
|
||
title="Strands"
|
||
description="Thin ribbons of pink and blue light weave across a black field. A WebGPU shader from the Shaders library (shaders.com, MIT)."
|
||
variables={[]}
|
||
meta={{"duration":2,"width":1920,"height":1080,"category":"Blocks","badge":"Stable","codeLines":31}}
|
||
attribution={{"path":"registry/blocks/strands","tags":["webgpu","webgpu-shader","background","light","lines","ribbons"]}}
|
||
video="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/strands.mp4"
|
||
webgpu
|
||
hasCode
|
||
rawUrl="https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/blocks/strands/strands.html"
|
||
>
|
||
|
||
<CatalogSlot slot="code">
|
||
|
||
```html strands.html
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<style>
|
||
[data-composition-id="strands"] canvas[data-shader] {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 1920px;
|
||
height: 1080px;
|
||
display: block;
|
||
background: #000;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div
|
||
data-composition-id="strands"
|
||
data-start="0"
|
||
data-duration="2"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
data-requires-webgpu
|
||
data-no-timeline
|
||
style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000"
|
||
>
|
||
<canvas data-shader="Strands" width="1920" height="1080"></canvas>
|
||
</div>
|
||
<script src="lib/shaders.iife.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
</CatalogSlot>
|
||
|
||
<CatalogSlot slot="install">
|
||
|
||
<InstallCommand command="npx hyperframes add strands" item="strands" />
|
||
|
||
That writes `compositions/strands.html`, plus 2 supporting files under `compositions/lib/`.
|
||
|
||
</CatalogSlot>
|
||
|
||
<CatalogSlot slot="docs">
|
||
|
||
## Add it to your video
|
||
|
||
It runs for 2 seconds at 1920×1080. Paste this into your composition:
|
||
|
||
```html index.html
|
||
<div
|
||
data-composition-id="strands"
|
||
data-composition-src="compositions/strands.html"
|
||
data-start="0"
|
||
data-duration="2"
|
||
data-track-index="1"
|
||
data-width="1920"
|
||
data-height="1080"
|
||
></div>
|
||
```
|
||
|
||
Move it in time with `data-start`. Put it on a different timeline row with
|
||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||
|
||
{/* hf:generated-footer */}
|
||
|
||
Tagged `webgpu` `webgpu-shader` `background` `light` `lines` `ribbons`.
|
||
|
||
## Related topics
|
||
|
||
- [Browse the complete Catalog](/catalog)
|
||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||
- [Build a richer composition](/go-further)
|
||
|
||
</CatalogSlot>
|
||
|
||
</CatalogDetail>
|