Errl Portal

About Assets Design Forum Gallery Studio

⤡

About this tab: Background — backdrop, shimmer, vignette, and optional custom image under the star field. Scroll down for controls.

Background

Shimmer, vignette, and GL in front. Custom base (optional) sits under the stars. Clear to remove. Other settings persist in local storage.

Custom base

Shimmer: optional animated highlight. Vignette: edge darkening. These mount the static background when enabled. GL overlay: wobble the screen-space gradient in WebGL (set Enabled + Alpha if you do not see it).

Shimmer

Vignette

GL overlay

Screen-space WebGL gradient: Alpha = strength. DX / DY = wobble direction. Move the pointer to see the ripple; raise Alpha first.

Alpha

About this tab: Pin — edit the home SVG in the widget, then inject or save. Read the tour below.

Pin Widget

Inject = live update now. Save = keep this style for later. Reset = restore stock Errl.

Tip: Inject to preview quickly, then Save when you like it.

About this tab: Rising Bubbles — 3D field on the #riseBubbles canvas. Not the same as GL Particles. Start here, then Advanced below.

Rising Bubbles (Basic)

Foreground on #riseBubbles — not GL Particles (GLB). Nav Orbit/Radius/Size only affects the menu ring, not this layer.

Mode

Classic = grab and throw / flick. Pop = tap a bubble on the canvas to pop it.

Classic Throw: drag/flick controls are prioritized.

Rise Speed

Count

Scale

Alpha

Interaction: drag to throw; flick near to kick (touch + mouse).

Attract Intensity

Ripples Intensity

About this section: Advanced — motion, spawn size, and jumbo options. Small changes can have a big effect.

Rising Bubbles (Advanced)

Motion + spawn shaping. Use small changes—some controls amplify each other.

Wobble

Frequency

Min size Max

Jumbo Percent

Jumbo Scale

Size Hertz

Speed

About this tab: GL Particles — WebGL dots behind the scene. Hue → Target "Particles" tints this layer.

GL Particles (background)

Deep background particle layers (WebGL) behind the scene—separate from the Rising Bubbles (RB) canvas. Speed = travel; Density = more/fewer dots; Alpha = how visible. Use the Hue tab with Target "Particles" to recolor. Randomize re-rolls all three; WebGL can take a second to spin up the first time.

Speed

Density

Alpha

About this tab: Errl — character scale, classic SVG goo, then WebGL goo on the body (not the nav ring).

Errl Size

Size

Outlines

Errl Goo (Classic)

Classic Goo controls Errl SVG wobble. Auto animates sliders; Play/Pause controls timeline.

Goo Enabled

Displacement Auto

Wobble Auto

Speed Auto

Auto Speed

Animation

Mouse reactive

WebGL Goo (Errl)

WebGL Goo affects the Errl body only. Menu bubble layout stays in the Nav tab.

Wiggle

Flow speed

Grip

Drip

Viscosity

About this tab: Nav — orbit, radius, size, GL orbs, and bubble skins. Does not change Rising Bubbles.

Nav Bubbles

Layout controls for the menu bubbles; GL Orbs toggles the WebGL render layer.

Orbit

Radius

Size

GL Orbs

Apply to

Packs

Skin

About this tab: Heads-up — panel size, burst, presets, then audio, accessibility, and scene tint in sections below. Read top to bottom.

Panel size

Size

Particles

Short impulse on the GL background bubbles. Uses WebGL. Adjust GL Particles (GLB) for density/alpha.

Enable Preset Scenes (changes multiple systems—confirm on apply. Undo/Redo below.)

Preset Scenes

Show My Presets (save/apply 3 custom bundles)

My presets (3 slots)

About this tab: Color — pick a layer, enable, then adjust hue, saturation, and intensity. Timeline animates the target.

Hue Enabled

Pick a target layer, then adjust Hue/Sat/Intensity. Timeline + Play animates that target.

Target

Hue

Saturation

Intensity

Timeline

About this section: Audio — output level and low-end EQ for nav pings and effects.

Audio

Enabled

Master

Low End

About this section: Accessibility — motion, contrast, and color inversion for comfort.

Accessibility

About this section: Scene tint — quick mood grades on the WebGL stack (Errl and FX).

Scene tint (WebGL)

Subtle color grade on the WebGL layer. Heavier when GL overlay is on.

About this tab: Developer — admin flags, export/snapshot, save defaults, and session logs. Use Reset defaults if the phone looks wrong.

Portal (admin)

Preview the Design entry when the route is not ready. Off by default.

Show Design in navigation

Developer Tools

Snapshot = portable HTML/CSS/JS. PNG = screenshot. Export/Import Settings = full settings bundle (local).

HTML/CSS/JS

(stored in local)

Developer Logs

Auto-scroll

Logs will appear here...

Tab reset