# Livemark Aperveil / Light, shaped for the web. Collection: Premium (Aperveil Shaders and Aperveil Pro) · Coming soon. An animated WebGPU logo for React: drop in an SVG or PNG and Livemark draws it 24 ways, from pixel tiles and liquid metal to neon and stained glass. [Aperveil integration guide](https://www.aperveil.com/docs) ## What it does Drop in an SVG or PNG and Livemark draws it twenty-four ways: as pixel tiles, characters, halftone dots or dither; as liquid metal, glass, holographic foil, brushed aluminum or letterpress; as contour lines, neon, light rays, stained glass or embroidery; as clay, velvet, marble, smoke, bokeh, crystal, pearl, kintsugi, ridgelines or paper cut. Your logo is prepared once in the browser into a smooth distance field, so every effect follows its true outline at any size, with curves cleaned of jagged pixel edges. The pointer answers in one of eight ways: it can sharpen the mark, magnify it, send ripples through it, light it, scatter or scramble its tiles, or reveal the clean logo underneath. ## Choose it for Put your mark at the heart of a launch page, a portfolio, an agency site or an event: as the hero itself, or as a living sign-off in the footer. Choose the effect that speaks for the brand, Metal or Glass for hardware, Neon or Terminal for developer tools, Papercut or Letterpress for editorial work, and keep the copy beside it. ## Limits Livemark draws one logo you provide, as an SVG or PNG with a clear outline; it is not a vector editor, a logo generator or an animation timeline. Very thin hairline marks lose detail in the tiled effects. Your logo is prepared in your browser and never uploaded. ## Current look Default. Color Looks change colors only; motion, geometry and typography remain unchanged. [Open editor](https://www.aperveil.com/shaders/livemark/edit?look=default&scene=landing) ## Landing scene This preview uses `position`: [0.66,0.5], `scale`: 0.74, `effect`: "Metal". The editor link carries these settings with your Look, except the placement: the editor keeps the shader centred. Direct editor visits use the product defaults; Reset all restores those defaults. ## Install Livemark is part of Aperveil Shaders and Aperveil Pro, coming soon. Its live demo is open; installation and downloads open in a later release. Free shaders install today: see the [Aperveil integration guide](https://www.aperveil.com/docs). ## Controls - Effect (`effect`, select): How the mark is drawn, in twenty-four ways: pixel tiles, characters, halftone, dither, liquid metal, glass, holographic foil, aluminum, letterpress, contour lines, neon, light rays, stained glass, embroidery, clay, velvet, marble, smoke, bokeh, cut crystal, pearl, kintsugi, ridgelines or layered paper. - Size (`cell`, slider): Size of the pattern: a tile's or a halftone cell's width in CSS pixels; the other effects scale with it, from a character's height and a dither pixel to a glass piece, the space between lines, a thread, a light, the cracks or the paper layers. - Relief (`relief`, slider): How much the mark stands out: its edges catch and lose the light, metal and glass round over more deeply, crystal's bevel cuts wider and steeper, letterpress bites deeper, ridges rise higher and paper layers stand taller. - Gap (`gap`, slider): Space between tiles, as a share of a tile. - Corners (`roundness`, slider): From square tiles to round dots. - Sheen (`sheen`, slider): A slow band of light crossing the mark. - Breathing (`breathe`, slider): How much the tiles swell and settle. - Characters (`charset`, select): Which glyphs set the mark: the classic ramp from a dot to an @, binary digits, block shades, or round dots. - Density (`density`, slider): Denser or lighter throughout: characters, dots, dither, smoke or lights. - Drift (`drift`, slider): How much the glyphs on the flat of the mark slowly change. - Flow (`flow`, slider): How fast reflections, colors, lights, beams or lines move. - Liquid (`liquid`, slider): How much the metal swells and warps, like a liquid surface. - Refraction (`refraction`, slider): How strongly the glass or crystal bends the light behind it. - Dispersion (`dispersion`, slider): How much steep edges split into color, and how colourful crystal's flashes are. - Iridescence (`iridescence`, slider): How much of the foil is rainbow (the rest is the ink's silver), or how much color plays in the pearl. - Grain (`grain`, slider): How fine the surface's grain is: the brushing on aluminum, the veining on marble. - Press (`press`, select): What sits in the impression: nothing (blind), the ink, or foil. - Line width (`lineWidth`, slider): Width of a line, of a ridge or of the neon tube, in CSS pixels. - Glow (`glow`, slider): How much light the neon, the light rays and the bokeh give; for light rays, also how far the beams reach. - Ink (`colorInk`, color): Color of the mark where it begins, at its top left. - Second ink (`colorInk2`, color): Color of the mark where it ends, at its bottom right. The same as the ink for one color. - Accent (`colorAccent`, color): Color the pointer lends the mark where it acts, and Reveal's ring. - Seam (`colorSeam`, color): Color of the metal in kintsugi's seams and on its rim. - Ground (`background`, color): Color behind the mark. - Hover (`hover`, select): What the pointer does, in every effect: Focus makes the mark finer under it, Lens magnifies, Ripple sends rings through it, Spotlight makes the pointer the light, Scatter pushes tiles or characters away, Scramble sets them flickering, Reveal shows the clean mark, None leaves it be. - Hover radius (`hoverRadius`, slider): How far the pointer reaches, as a share of the canvas. - Hover strength (`hoverStrength`, slider): How strongly the pointer acts. - Position (`position`, xy): Where the mark sits in the frame. - Logo size (`scale`, slider): Size of the mark, as a share of the frame. - Opacity (`opacity`, slider): Opacity of the whole surface. - Background opacity (`backgroundOpacity`, slider): Opacity of the ground; zero leaves only the mark. ## Compatibility WebGPU rendering requires a supported browser and secure context: Chrome and Edge (Windows, macOS and ChromeOS; Chrome on Android 12 or newer), Safari 26 (Mac, iPhone and iPad) and Firefox (Windows (from 141) and Apple silicon Macs (from 145)). Firefox on Linux, Android and Intel Macs is still rolling it out (checked October 2026). The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. ## Performance 2.884 ms GPU timestamp median; p95 7.471 ms. 1440x900 @ dpr 2; Apple M2 (8-core GPU), Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-10-13. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee. ## Questions ### Which logo files can I use? An SVG or a PNG with a transparent or plain background. Livemark prepares it once in your browser into a smooth distance field, so the outline stays crisp at any size; the file is never uploaded. ### Which effects are there? Twenty-four: Pixel, ASCII, Halftone, Dither, Metal, Glass, Foil, Aluminum, Letterpress, Contour, Neon, Rays, Stained, Embroidery, Clay, Velvet, Marble, Smoke, Bokeh, Crystal, Pearl, Kintsugi, Ridgeline and Paper cut. Each has its own controls, and the Looks change only the colors. ### What does the pointer do? You choose: Focus makes the mark finer under it, Lens magnifies, Ripple sends rings through it, Spotlight makes the pointer the light, Scatter pushes tiles or characters away, Scramble sets them flickering and Reveal shows the clean logo. None leaves it still. ### Can I try it before Pro? Yes. Every effect runs live on the sample mark. Your own logo, the full controls and the exports for React, Next.js, Vue, Nuxt, HTML, WordPress and Framer come with Aperveil Shaders or Aperveil Pro. ### What happens without WebGPU? This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component. ### Can I use this shader commercially? Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## License Part of Aperveil Shaders and Aperveil Pro · Coming soon. The live demo is open; editing and downloads open in a later release. Free shaders and blocks are available now. Follow the license notices supplied with the source you download. Commercial use comes with Aperveil Shaders or Aperveil Pro: the proposed individual license covers one developer on unlimited permitted personal, client and SaaS interface projects. ## Related shaders - [Halftone](https://www.aperveil.com/shaders/halftone) - [Dither](https://www.aperveil.com/shaders/dither) - [Liquid Chrome](https://www.aperveil.com/shaders/liquid-chrome)