--- title: "Anamorphic Streak Flare" description: "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." --- import { InstallCommand } from "/snippets/install-command.jsx"; import { VariablesExplorer } from "/snippets/variables-explorer.jsx"; ```html vfx-anamorphic-flare.html Anamorphic Streak Flare
``` ## Install 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) 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
``` ## Source ```html Anamorphic Streak Flare
``` {/* hf:generated-footer */} Tagged `vfx` `background` `showcase` `optical` `canvas`. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further)