Skip to content

FormsPro

10 effects for the forms family · every one loops · pure CSS unless a card says otherwise

The previews are open to everyone; the code of these effects comes with WunderUI Core and Pro.

OverviewActivityFiles

The bar travels and resizes to the label it lands on.

Pure CSSForms
Drop files here

Four repeating gradients, one offset. No SVG, no border-image.

Pure CSSForms
4829

The focus ring moves ahead of the digit, which is what makes it feel typed.

Pure CSSForms
OverviewActivity

The outgoing panel leaves against the travel direction while the incoming one arrives with it. Both move by the same small distance, so the pair reads as one sheet sliding rather than two panels crossfading.

Pure CSSForms

The range paints in the direction you dragged.

Pure CSSForms
Wrong code

The amplitude decays instead of stopping flat. That is what separates an error from a tantrum.

Pure CSSForms

Each star overshoots as the pointer passes it.

Pure CSSForms
123

The connector fills before the next number lights.

Pure CSSForms
WeakFairStrong

Segments fill left to right, the label changes with them.

Pure CSSForms
Send me updates

The box fills, then the tick draws itself along its own path. Drawing the tick instead of fading it in is what makes it read as a decision rather than a repaint.

Pure CSSForms