What it does
A look is eleven slots, each holding one named effect. Roll a number and every slot fills. The same number always gives the same look, so a render comes out the same every time.
Roll a look
One number picks a crop, a grade, a print screen, lens effects, tape damage and a camera shake. Roll again for a different look.
Lock and reroll
Lock the slots you like and roll the rest again. Each label names the effects its number picked.
Saved looks
Save a look as a preset. Use it on the next video by name, and set how strong it is.
Demos
Hexed rolls
A reel that rolls a new look every second and a half, and sheets of twenty seeds on one frame.
Compositions Reel Sheet Showcase ShowSheet GrungeSheet Pop VjSong Flash Song Dream Look RickReel RickSheet RickShowcase RickShowSheet RickGrungeSheet RickDream RickLook
Studio panels
Ready-made scenes for the Hexed, Paper, VJ and caption panels in Studio. Edit a value and the preview redraws.
Compositions HexedLook PaperMatchCut PaperCutOut PaperScrapline PaperFoldOut TypeCaptions VjLook
Reference
Exports, props and examples, for wiring it into a project.
Ships with
What it exports
Components
Drawn as JSX inside a composition.
<Hexed />
Wraps any children and rolls a look onto them. It fills the composition unless you give a width and height.
| Prop | What it does |
|---|---|
| children | React.ReactNode |
| seed? | the roll; ignored when genome is given |
| lock? | slots to hold while the seed changes |
| genome? | a saved look; wins over seed and lock |
| preset? | a saved look by name, from presets/ (tools/save-preset.mjs writes them); wins over seed and lock |
| off? | slots switched off |
| amount? | 0..1 over the whole look |
| amounts? | 0..1 per slot, on top of the genome's own amounts |
| order? | the order the effect slots run in |
| textures? | scans the grunge slot picks from, beside its procedural textures |
| adjust? | Adjust |
| width? | the picture's size; default the composition's |
| height? | number |
| at? | where the picture's top-left corner sits on the canvas, for the passes that read by position (mirror, streaks, slices); default [0, 0], right when Hexed fills the frame |
<Grunge />
Lays a texture (a procedural one or a scan) over the finished picture.
<TimeLayers />
Draws the picture at frame, plus the copies the gene adds.
Functions (8)
describe()
A one-line name for a genome: the genes that play, in panel order.
genesOf()
Every gene id a slot can roll, "none" first.
roll()
Rolls a genome from a seed.
Locked slots keep what the lock says; the rest roll fresh.
hsl()
Hsl (degrees, 0..1, 0..1) to #rrggbb
hash()
FNV-1a over a string, to a 32-bit whole number.
rng()
Mulberry32: small, fast and the same on every machine.
remap()
The frame a remapping gene shows at frame (echo, ghost and strobe leave it alone).
rollGenome()
Rolls a genome from a seed. ids lists the gene ids a slot can roll, "none" first.
Locked slots keep what the lock says; the rest roll fresh.
Constants (16)
SLOTS
Every slot, in the order the panel lists them.
adjustSchema
The global controls over the whole look.
genomeSchema
A rolled look: one strand per slot.
Plain JSON; <Hexed genome={...}> plays it back exactly.
hexedSchema
The props of <Hexed> apart from its children.
PROCEDURAL DAMAGE GRADE ISOLATE OPTICS POOLS SCREEN CROP FPS SHAKE MIRROR TIME
Genes by slot
Each slot holds one gene. Lock a slot to keep its gene, or leave it to the seed.
crop (5)
how the picture sits in the frame (zoom, tilt, black bars)
- punch-in: Zooms in a little and nudges the frame off centre.
- off-centre: A tighter crop pushed to one side.
- tilt: Turns the frame a few degrees and crops in to hide the corners.
- letterbox: 2.39:1 or 2:1 bars on a 16:9 frame
- pillarbox: 4:3 or 1:1 pillars
shake (4)
a camera that will not keep still
- handheld: A slow, small camera wobble.
- jitter: Quick jumps from one position to the next.
- impact: A hard knock every half second or so that settles back.
- breathe: A slow push in and out.
fps (4)
frames held, so footage steps like 12 fps animation
- fps-12: Holds frames so the clip steps at 12 a second.
- fps-8: Holds frames so the clip steps at 8 a second.
- fps-6: Holds frames so the clip steps at 6 a second.
- stutter: Holds of one to four frames in a seeded run, like footage stepped by hand
time (6)
what happens between frames (echo, repeat, reverse)
- echo: Trails of the picture from earlier frames.
- ghost: A faint copy of an earlier frame laid over the current one.
- strobe: Flashes a frame.
- repeat: Plays each short beat twice.
- reverse: The last few frames of a block play backwards, like a scratch.
- blend: Blends frames into a smear.
mirror (7)
the frame folded, tiled or split
- mirror-x: Mirrors the frame left to right.
- mirror-y: Mirrors the frame top to bottom.
- quad: Four mirrored copies of the frame.
- tile-2: The frame tiled two across.
- tile-3: The frame tiled three across.
- kaleido: A kaleidoscope with three to eight segments.
- split-offset: Splits the frame in two and slides one half.
isolate (6)
keep one hue and drain the rest
- keep-red: Keeps the reds and drains the rest to grey.
- keep-warm: Keeps orange and yellow tones and drains the rest.
- keep-green: Keeps the greens and drains the rest.
- keep-blue: Keeps the blues and drains the rest.
- keep-any: Keeps one randomly chosen hue and drains the rest.
- shift-one: Turns one hue into a different one and leaves the rest.
grade (13)
the tone of the whole picture
- negative: A negative washed into one colour, the shadows crushed: inverted mint, inverted ice
- threshold: One bit: black and paper, broken up by grain before the cut so the edges go to grit
- press: Warm grey newsprint, hard contrast: the press look under a line screen
- night-tint: A night picture tinted into one deep colour, a little of the original showing through
- monotone: One hue from black to blown white, as a monotone print
- sepia-print: Old sepia print: browns crushed at the bottom, a cream top, grain
- thermal: Heat: posterised black, blood, orange, yellow, cream
- posterize: Three or four flat colours
- duotone: Two colours of ink
- solarize: The tones folded back at the top: solarised
- acid: Loud colour: hues spun, saturation up
- teal-crush: Crushed blacks with teal shadows and warm highlights.
- bleach: Washed-out colour with hard contrast, like a bleach bypass print.
screen (11)
a print or display pattern over the picture
- halftone: Dots of ink, as in a newspaper photo.
- line-screen: Fine horizontal lines, the TV-print look; sometimes turned
- dither: A few flat colours broken up with a dither pattern.
- scanlines: Scanlines across the picture.
- crt: Scanlines plus the curved glass of a tube.
- two-ink: A print in two inks.
- engraving: Fine engraved lines in ink on paper.
- crosshatch: Crosshatched pen lines in ink on paper.
- painterly: A painted look that smooths detail into brush shapes.
- ascii: The picture drawn in text characters.
- pixelate: Large square pixels.
optics (13)
what the lens does (fringing, bloom, streaks)
- fringe: Red and blue edges split a little apart, as in a cheap lens.
- split: A strong colour split along one axis.
- bloom: Highlights glow.
- halation: A red or orange glow round bright spots, as film does.
- soft-focus: A slight blur with a glow on top.
- fringe-bloom: Colour fringing and bloom together.
- zoom-blur: Blur that radiates from the centre.
- streaks: Highlights stretched into streaks.
- anamorphic: A coloured horizontal flare, as from an anamorphic lens.
- light-leak: A burst of coloured light, as from a film camera that leaks.
- vignette: Dark corners.
- lens-wobble: The picture ripples as if seen through a warped lens.
- smear: The whole picture dragged sideways in uneven bands, as a long shutter or a smeared print
damage (8)
what the tape or film did to it
- slice-glitch: Horizontal slices of the picture shift sideways.
- rgb-slice: Slices shift and the colour channels come apart.
- fine-grain: Fine monochrome grain.
- coarse-grain: Large, coloured grain.
- film-wear: Dust, hairs and scratches of an old print.
- tape: Worn video tape: tracking errors, noise and smeared colour.
- glitch: Digital blocks and colour splits.
- warp: The picture warps as if drawn on rippling water.
grunge (6)
a texture laid over the finished picture
- creases: Folded-paper creases.
- stains: Stains and blotches.
- speckle: Speckled dirt.
- scratches: Scratches.
- fibre: Paper fibres.
- toner: Photocopier toner.
Presets
Saved looks. Pick one by name, or roll your own and save it.
moss-impact
Examples
import { Video, staticFile } from '@kinetographdev/core';
import { Hexed } from '@kinetographdev/hexed';
<Hexed seed={42}><Video src={staticFile('clip.mp4')} /></Hexed>import { Image, staticFile } from '@kinetographdev/core';
import { Hexed } from '@kinetographdev/hexed';
<Hexed seed={42} lock={{ grade: 'sepia-print' }} off={['mirror']}><Image src={staticFile('photo.jpg')} /></Hexed>
<Hexed preset="moss-impact" amount={0.7} adjust={{ contrast: 20 }}><Image src={staticFile('photo.jpg')} /></Hexed>In Studio
Panel
Studio gets a Hexed panel: a card for each slot with its effect, a strength slider, a lock and a shuffle button. Shuffle rerolls everything except the locked slots, and a menu holds your presets. It follows Studio's light and dark theme.
An agent can roll a look, list what each slot accepts and read your presets. It then writes the look it settles on into your code or saves it as a preset, so the look does not live only in Studio.
It is a package in the source repository. Its skill comes with it, so an agent can use it without being taught.