> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.

# Holographic

> An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).

# Holographic

An iridescent foil orb with a shifting rainbow sheen, centred on black. A WebGPU shader from the Shaders library (shaders.com, MIT).

**Holographic**

```html holographic.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      [data-composition-id="holographic"] canvas[data-shader] {
        position: absolute;
        inset: 0;
        width: 1920px;
        height: 1080px;
        display: block;
        background: #000;
      }
    </style>
  </head>
  <body>
    <div
      data-composition-id="holographic"
      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="Holographic" width="1920" height="1080"></canvas>
    </div>
    <script src="lib/shaders.iife.js"></script>
  </body>
</html>
```

Copy npx hyperframes add holographic to the clipboard

That writes `compositions/holographic.html`, plus 2 supporting files under `compositions/lib/`.

## 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="holographic"
  data-composition-src="compositions/holographic.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.md) for the rest.

{/* hf:generated-footer */}

Tagged `webgpu` `webgpu-shader` `holographic` `iridescent` `rainbow` `orb`.

## Related topics

* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
