falsa.club

We're a group of engineers and designers exploring hardware and software experiences for creation, play and learning.

colourway

Drop a song, choose your part, get playing.

Effects

Paper grain

Three independent grain layers, one per surface: the cream page (body::after), the dark projects section (.projects::after), and the coloured project-card bars (.project__bar). Each is tuned separately because no single blend mode reads on both near-white and near-black. The hero lockup is left grain-free on purpose — it is already the busiest animation on the page.

Single sheet — one grain over the whole page

Light backgroundModelTexture source: static image, generated white noise, or fractal noise.Blend modeDarkening modes (multiply) read on the cream; lightening modes vanish on it.Layer opacity Tile size Animate — film-grain shimmerSpeed fpsHow many times a second the grain re-jumps. Higher = finer shimmer.

Amplitude Contrast of the generated noise — higher = harsher grain.

Base frequency Octaves Grain strength

Grain opacity grained's per-dot alpha, baked into the tile. Compounds with Layer opacity above.Grain density Pixel step between dots — 1 fills every pixel, higher is sparser / coarser.Dot width Dot height Dot size in px. Raise width/height for chunky or streaky grain.Pattern height 0 = square (matches Tile size). Raise for a non-square, streaky tile.Churn steps grained's steps() count over one Speed cycle. Low = choppier motion.

Dark backgroundModelBlend modeLightening modes (screen) read on the dark surface; multiply vanishes on it.Layer opacity Tile size Animate — film-grain shimmerSpeed fpsHow many times a second the grain re-jumps. Higher = finer shimmer.

Amplitude

Base frequency Octaves Grain strength

Grain opacity grained's per-dot alpha, baked into the tile. Compounds with Layer opacity above.Grain density Pixel step between dots — 1 fills every pixel, higher is sparser / coarser.Dot width Dot height Dot size in px. Raise width/height for chunky or streaky grain.Pattern height 0 = square (matches Tile size). Raise for a non-square, streaky tile.Churn steps grained's steps() count over one Speed cycle. Low = choppier motion.

Coloured — card barsModelBlend modeContrast modes (soft-light, overlay) texture the mid-tone brand gradients.Layer opacity Tile size Animate — film-grain shimmerSpeed fpsHow many times a second the grain re-jumps. Higher = finer shimmer.

Amplitude

Base frequency Octaves Grain strength

Grain opacity grained's per-dot alpha, baked into the tile. Compounds with Layer opacity above.Grain density Pixel step between dots — 1 fills every pixel, higher is sparser / coarser.Dot width Dot height Dot size in px. Raise width/height for chunky or streaky grain.Pattern height 0 = square (matches Tile size). Raise for a non-square, streaky tile.Churn steps grained's steps() count over one Speed cycle. Low = choppier motion.

Splash grid

EntranceTile duration How long each individual tile's brighten animation takes.Diagonal stagger Total delay spread across the diagonal — higher = slower wave.Start lift How far tiles rise from below at the start of their entrance.Start opacity How visible tiles are before their entrance animation begins.Peak scale How much tiles overshoot their resting size at the entrance peak.EasingCurve shape of each tile's entrance animation.

Exit & scrollScroll length How many vh of scroll the grid fade is spread across.Parallax drift How much the grid lags behind scroll — creates a depth effect.Fade spread How staggered the exit fade is along the diagonal.Per-tile fade How sharply each tile fades once its turn begins.Grid gone at Scroll fraction at which the last tile has fully faded out.Lockup appears at Scroll fraction at which the hero lockup becomes visible.Lockup hides at Scroll fraction (going back up) at which the lockup hides again.

Intro soundPlay on loadVolume Playback level of the intro sound cue.

Sound change applies on next reload.

Lockup motion

Lockup slideDistance How far the bars and wordmark slide up from on entrance.Duration How long the slide-in transition takes.EasingCurve shape of the slide-in animation.Start delay Pause before the bars begin sliding in after the grid fades.Wordmark delay Extra pause between the bars settling and the wordmark following.

Subtext revealDistance How far the tagline rises from below on reveal.Duration How long the tagline fade and rise takes.Delay after wordmark Gap between the wordmark settling and the tagline appearing.EasingCurve shape of the tagline reveal.

Highlight sweepDuration How long the highlight band takes to cross the full lockup.Gap after subtext Extra pause after the tagline is fully visible before the sweep fires.Band width Width of the highlight band as a % of the lockup width.Brightness Opacity of the white highlight — 0 invisible, 1 solid white.Delay (lockup) Additional delay before the sweep fires, on top of the lockup settle time.Angle Direction of the sweep gradient — 90° is perfectly vertical.EasingCurve shape of the sweep — linear keeps the band at constant speed.Loop (tuning only)

ExitFade-out duration How fast everything fades when scrolling back up into the grid.

Lockup variant

VariantWhich treatment the lockup uses. The "Ramp" fields below only affect "ramp"; the "Card" fields only affect "card".

Ramp physicsGravity Pull on the falsa, in pixels per second². Higher = it drops and rolls harder.Bounce How much speed the falsa keeps on each bounce off the bar. 0 = no bounce.Drop height How far above the bar the falsa starts, in multiples of its own size.Slope angle How far the bar stack rotates clockwise into a slope.Ball size Diameter of the falsa, as a % of the lockup width.Spin How fast the spectrum wheels round as it rolls. 1 = rolling without slipping.Start delay Pause after the lockup is revealed before the falsa drops.Rest before roll Beat the falsa sits still on the bar before the tilt begins.Tilt time How long the bar takes to swing into the slope (and back to flat).

CardCard width Widest the card gets before it starts tracking the viewport.Base slab Thickness of the solid slab along the card's bottom edge.Knob size Diameter of the rotary colour knob.Knob travel Rotation between the first colourway and the last.

Lockup ambient

Colourway driftLeg duration Time to travel from the start colourway to the end colourway. It eases back again after.From colourwayWarm end of the travel.To colourwayCool end. Keeping this at "mauve → purple" holds the strongest contrast on the cream.MotionHow the colour eases between the two ends.Pause

Scroll cue

Chevron bobDistance How far the chevron bobs downward on each cycle.Cycle Duration of one full bob cycle.Pause

HoverShift How far the "Show projects" link nudges down on hover.Opacity How faded the link becomes on hover.Duration Speed of the hover fade and shift transitions.

Wave idle

Amplitude How much each line bends vertically — 0 is flat.Cycle Duration of one full swell-and-relax cycle.Stagger per line Delay between adjacent lines — positive ripples top-to-bottom.EasingCurve shape of each line's oscillation.Field opacity Overall visibility of the wave field.Cursor push How far lines bulge away from the cursor — negative pulls toward it.Cursor reach How many lines are affected by the cursor, as % of field height.Cursor ease How quickly lines ease to their cursor-pushed position.Pause

Wave shape

The geometry of the contour field — how far each line bends and how that bend grows from the flat centre out to the edges. Baked into the paths, so a change here rebuilds the field.

Centre bend Amplitude of the flattest middle line — 0 is dead straight.Edge bend Amplitude of the outermost lines, at the top and bottom of the field.Spread How the bend grows centre → edge. 1 is an even ramp; higher holds the middle flat and pushes the swell outward; lower gains height fast just off centre, then levels off.Arch width Fraction of the width the hump spans; the rest is split between the two flat end runs.

Project cards

Reveal triggerThreshold Fraction of card that must be visible before the animation fires (0 = any pixel).Viewport offset Negative = card must be further into the viewport; positive = fires before it enters.

Bars & titleBar stagger Delay between each colour bar's wipe animation.Bar wipe How long each bar takes to wipe in.Title fade How long the project title takes to fade and rise in.Title rise How far the title rises from below on reveal.Title gap Delay between the last bar finishing and the title appearing.

Idle floatCycle Duration of one full float cycle.Lift How high the card bobs at the peak of its float.Tilt How much the card tilts side-to-side while floating.Pause

Hover & pressHover lift How high the card rises when hovered.Hover scale How much the card grows when hovered.Hover duration Speed of the hover lift and scale transition.Press duration Speed of the snap-down response on click or tap.

Section handoff

Lockup recedeTrail distance How far the lockup drifts down as the dark section rises over it.Fade How much the lockup fades during the handoff — 0 stays opaque.Shrink How much the lockup scales back as it recedes.

Wave fieldParallax depth How much the wave field lags behind the cards as they scroll in.

Toggle with `. Values persist until you Reset.

falsa.club

Projects