> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Anamorphic Streak Flare
> A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.
# Anamorphic Streak Flare
A drifting field of bright points, each one throwing the long horizontal blue-violet streak a real anamorphic cinema lens produces. Built from the measured filter constants: a 0.3 high-pass, 80 horizontal taps at quarter resolution, a samples/3 gain and a 0x7a8aff tint.
**Anamorphic Streak Flare**
```html vfx-anamorphic-flare.html
Anamorphic Streak Flare
```
Copy npx hyperframes add vfx-anamorphic-flare to the clipboard
That writes one file: `compositions/vfx-anamorphic-flare.html`.
## Add it to your video
It runs for 10 seconds at 1920×1080. Paste this into your composition:
```html index.html
```
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.
## Change how it looks
Set these CSS variables on the block:
* `--intensity` — Streak intensity. Defaults to `5`.
* `--threshold` — High-pass threshold. Defaults to `0.3`.
* `--streaklength` — Streak length gain. Defaults to `1`.
* `--tint` — Streak tint. Defaults to `#7a8aff`.
* `--bloomradius` — Bloom radius. Defaults to `0`.
* `--timescale` — Drift rate. Defaults to `0.5`.
* `--emitters` — Emitter count. Defaults to `140`.
* `--backdrop` — Backdrop. Defaults to `#04040a`.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you
want to change on the element:
| Variable | Default | Accepts | What it does |
| - | - | - | - |
| `intensity` | `5` | 0 to 20, step 0.1 | |
| `threshold` | `0.3` | 0 to 1, step 0.01 | |
| `streakLength` | `1` | 0.1 to 6, step 0.05 | |
| `tint` | `#7a8aff` | color | |
| `bloomRadius` | `0` | 0px to 80px, step 1px | |
| `timeScale` | `0.5` | 0 to 3, step 0.05 | |
| `emitters` | `140` | 1 to 400, step 1 | |
| `backdrop` | `#04040a` | color | |
Set them with `data-variable-values` on the element that mounts it. These are the
defaults, so this behaves exactly like the preview above until you change one:
```html wrap
```
{/* hf:generated-footer */}
Tagged `vfx` `background` `showcase` `optical` `canvas`.
## 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)