Gradient
A soft two-stop wash.
GradientEffects
EFFECTS
Every effect on this page is a token from the same vocabulary the Composer edits — stacked overlap, gradient and pattern fields, hover states, entrance motion, scroll reveal, shadows, radii and type. No CSS or JavaScript ships with the site.
LAYERS
Children of an overlapping grid share a single cell. A per-child z-index decides what paints on top and a margin token insets each layer — the same mechanism a freely placed block uses, with no absolute pixels.
FIELDS
Ten gradient-only pattern fields layer over any theme colour: a soft gradient, a technical grid, a dotted field, fine grain, a wave band, plus diagonal stripes, a checker board, a conic ray fan, soft blobs and a colour mesh. Every field recolours with the theme.
Grid
A technical ruled field.
GridDots
A quiet dotted field.
DotsNoise
Fine grain for depth.
NoiseWaves
Layered wave bands.
WavesStripes
Diagonal token bands.
StripesChecker
A tinted board.
CheckerRays
A conic ray fan.
RaysBlobs
Soft surface pools.
BlobsMesh
Overlapping colour mesh.
MeshAurora
Broad north-lights washes.
AuroraINTERACTION
Nine pointer effects that need no JavaScript — lift, glow, scale, raise and brighten, plus an underline, a muted slate tint, a bold pop and a gentle shrink. Hover a card to see it move.
Lift
Rises with a soft shadow.
LiftGlow
A coloured halo on hover.
GlowScale
Grows slightly toward you.
ScaleRaise
Lifts and deepens.
RaiseBrighten
Increases surface light.
BrightenUnderline
Marks the label on hover.
UnderlineSlate
Tints toward the muted token.
SlatePop
A bold spring forward.
PopShrink
A gentle press back.
ShrinkTilt hover
Leans in on hover.
Tilt hoverMOTION
Twelve entrance curves, each opt-in and progressive: content is visible without JavaScript, and reveal waits for the viewport. The echoes — pulse, shake, wiggle, tilt and flip — announce a state without hiding content.
Fade in
Opacity only.
Fade inZoom
Scales up gently.
ZoomFloat
A slow hover drift.
FloatBounce
A single settle.
BouncePulse
A steady attention beat.
PulseShake
A short refusal jitter.
ShakeWiggle
A playful rock.
WiggleTilt
Settles into place.
TiltFlip in
Turns into view.
Flip inFade out
Fades away.
Fade outReveal zoom
Grows as it appears.
Reveal zoomSURFACE
Shadows, borders, corner radii and the type ramp are the same tokens everywhere, so a surface stays consistent across every block.
Soft shadow
A gentle elevation.
Soft shadowDeep shadow
A stronger elevation.
Deep shadowStrong border
A defined edge.
Strong borderLarge radius
A softer corner.
Large radiusUppercase kicker
Wide, tracked, upper.
Uppercase kickerSoft opacity
A quieter surface.
Soft opacityStart from HOBA Portal and make it yours — every section is editable and every page is reusable.
Contact us(c) HOBA Portal. Built with HOBA.