Event-site recipe

An event or launch page can carry more character than a product page. From 4.30, asciify-engine/kit has the pieces for its header, hero and footer: links that scramble on hover, a hero of frames that morph as hatched lines, a pointer that sprays hatching with coordinate tags, a globe of dots, a dithered glow, photos in two brand tones, and a wordmark that assembles as the page reaches it. Each is one call, draws through the page's one GPU context, idles when nothing moves, pauses off screen, shows settled stills under reduced motion and leaves your HTML working without WebGL2. See each one live on the components page.

Header

Keep the links real HTML. decode with scramble and a manual trigger leaves them plain until the pointer enters, flips their letters through other alphabets in the link's own font, then hands back to the HTML.

import { decode } from 'asciify-engine/kit';

for (const a of nav.querySelectorAll('a')) decode(a, { scramble: true, trigger: 'manual', settle: 'text', look: { cellSize: 3 } });

Hero

On your brand-coloured ground, morphField holds each frame and cross-fades to the next: with the default engraved lines, one picture's stripes thin away as the next one's thicken. Frames are image URLs, videos, canvases or functions that draw in white on black each frame, such as a turning scene. The headline flips through alphabets and lands.

import { morphField, decode, cursorTrail } from 'asciify-engine/kit';

const hero = morphField(heroEl, { sources: frames, ink: '#ffffff', onChange: i => (counter.textContent = `${i + 1}/${frames.length}`) });
decode(heroEl.querySelector('h1'), { scramble: true, settle: 'text' });

// One per page: hatched spray with coordinate tags, behind cards and text.
cursorTrail({ style: 'spray', readout: true, ink: '--ascii-ink', zIndex: -1 });

Sections

import { globe, ditherImage, ditherGradient, background, wordField } from 'asciify-engine/kit';

const earth = globe(globeEl, { ink: '--brand', points: venues, label: 'Where we meet' });
ditherImage(figure, { tones: ['--brand-deep', '--brand'], mark: 'dither', reveal: 'scroll' });
ditherGradient(ctaPanel, { ink: '--brand-tint', lights: [{ x: 0.5, y: 1.08, radius: 0.62 }] });
// Repeated words, legible, lit under the pointer.
background(sponsorsEl, { preset: wordField, look: { glyphOrder: 'text', charset: ' build connect protect ', hover: 'lantern' } });

Footer

Close on the name, gathering out of scattered pieces as the visitor scrolls to it. Turn its own hover off so the page's cursor flows over it.

import { wordmark } from 'asciify-engine/kit';

wordmark(footerMark, { text: 'connect', assemble: 'scroll', look: { hover: 'none' } });