Effects library

Pick the motion.
Pugi builds it in.

94 effects, each one running live below. Choose the ones you like and your site gets exactly those, placed where they fit, with a calm version for anyone who turns motion off.

94 effects

  • Flight path

    Scroll

    A plane, bird or your logo flies along a route as the page scrolls, drawing its trail.

    Weight
    Showpiece (7.2 KB): one per screen
    Motion off
    The finished route, still, with the object at its destination.
    Use in Pugi: Flight path

  • Living gradient

    Backgrounds

    A slow, liquid colour field in your palette behind the hero.

    Weight
    Showpiece (2.8 KB): one per screen
    Motion off
    One still frame of the field.
    Use in Pugi: Living gradient

  • Parallax depth

    3D and depth

    Photo, shapes and type drift at different speeds for real depth.

    Weight
    Showpiece (4.4 KB): one per screen
    Motion off
    Layers sit still.
    Use in Pugi: Parallax depth

  • Zoom-out hero

    Hero

    The hero photo fills the screen, then settles into a framed picture as you scroll.

    Weight
    Showpiece (4.4 KB): one per screen
    Motion off
    The framed picture, still.
    Use in Pugi: Zoom-out hero

  • Pinned steps

    Scroll

    The section holds still while the visitor scrolls through three to five steps.

    Weight
    Showpiece (4.3 KB): one per screen
    Motion off
    Steps stacked, each with its visual.
    Use in Pugi: Pinned steps

  • Sideways gallery

    Scroll

    Scrolling down moves a row of pictures sideways.

    Weight
    Showpiece (4.6 KB): one per screen
    Motion off
    A native swipe row with snap points.
    Use in Pugi: Sideways gallery

  • Kinetic headline

    Text

    The headline rises in word by word on load.

    Weight
    Light (1.2 KB)
    Motion off
    The headline, still.
    Use in Pugi: Kinetic headline

  • Product showcase

    Hero

    Your product screen in a device frame that tilts as the page scrolls.

    Weight
    Showpiece (4.6 KB): one per screen
    Motion off
    Flat and still.
    Use in Pugi: Product showcase

  • Fade-up reveal

    Scroll

    Sections fade and rise gently as they enter the screen.

    Weight
    Featherweight, CSS only
    Motion off
    A short fade, no travel.
    Use in Pugi: Fade-up reveal

  • Staggered cards

    Cards

    Cards and list items arrive one after another.

    Weight
    Featherweight, CSS only
    Motion off
    All at once, a short fade.
    Use in Pugi: Staggered cards

  • Image reveal

    Scroll

    A photo unveils behind a sliding mask as it scrolls in.

    Weight
    Featherweight, CSS only
    Motion off
    Shown at once.
    Use in Pugi: Image reveal

  • Count-up numbers

    Text

    Figures count up to their value when they come into view.

    Weight
    Light (3.2 KB)
    Motion off
    The final number.
    Use in Pugi: Count-up numbers

  • Logo marquee

    Text

    An endless, calm strip of logos or quotes.

    Weight
    Featherweight, CSS only
    Motion off
    A still, wrapped row.
    Use in Pugi: Logo marquee

  • Tilt cards

    Cards

    Cards lean toward the pointer with a soft glare.

    Weight
    Light (2.5 KB)
    Motion off
    A plain card.
    Use in Pugi: Tilt cards

  • Magnetic button

    Buttons

    The main button leans toward the pointer as it comes near.

    Weight
    Light (1.9 KB)
    Motion off
    A plain button.
    Use in Pugi: Magnetic button

  • Spotlight cards

    Cards

    A soft light follows the pointer across a card.

    Weight
    Light (1.1 KB)
    Motion off
    A still glow in the corner.
    Use in Pugi: Spotlight cards

  • Rotating words

    Text

    One word in the headline cycles through a few options.

    Weight
    Light (3 KB)
    Motion off
    The first word, still.
    Use in Pugi: Rotating words

  • Aurora backdrop

    Backgrounds

    Soft drifting colour light behind a section.

    Weight
    Featherweight, CSS only
    Motion off
    Still colour fields.
    Use in Pugi: Aurora backdrop

  • Border beam

    Cards

    A light travels around the border of the card that matters.

    Weight
    Featherweight, CSS only
    Motion off
    A still accent border.
    Use in Pugi: Border beam

  • Film grain

    Backgrounds

    A fine, still grain over flat colour, for a printed feel.

    Weight
    Featherweight, CSS only
    Motion off
    Same (no motion).
    Use in Pugi: Film grain

  • Drawn underline

    Buttons

    Links draw their underline from left to right on hover.

    Weight
    Featherweight, CSS only
    Motion off
    Underline appears at once.
    Use in Pugi: Drawn underline

  • Lift and sheen

    Cards

    Cards and buttons lift slightly and catch a sheen on hover.

    Weight
    Featherweight, CSS only
    Motion off
    No lift, no sweep.
    Use in Pugi: Lift and sheen

  • Scroll progress bar

    Scroll

    A thin bar at the top shows how far the reader is.

    Weight
    Light (4.8 KB)
    Motion off
    Hidden.
    Use in Pugi: Scroll progress bar

  • Smooth scroll

    Scroll

    Scrolling glides with gentle inertia on desktop.

    Weight
    Light (6.8 KB)
    Motion off
    Off.
    Use in Pugi: Smooth scroll

  • Page transitions

    Transitions

    Pages cross-fade and slide when the visitor moves between them.

    Weight
    Light (3.2 KB)
    Motion off
    A plain swap.
    Use in Pugi: Page transitions

  • Location map

    Transitions

    Where to find us: a light map in your colours with a pin and an Open in Maps link.

    Weight
    Light (1.1 KB)
    Motion off
    Same (nothing moves).
    Use in Pugi: Location map

  • Area trend chart

    Charts

    A filled line that draws in to show growth over time.

    Weight
    Light (0.7 KB); the chart library loads after the page
    Motion off
    Drawn without animation.
    Use in Pugi: Area trend chart

  • Bar comparison

    Charts

    Bars grow in to compare a few values side by side.

    Weight
    Light (0.7 KB); the chart library loads after the page
    Motion off
    Drawn without animation.
    Use in Pugi: Bar comparison

  • Line comparison

    Charts

    Two or three lines draw in to compare trends.

    Weight
    Light (0.7 KB); the chart library loads after the page
    Motion off
    Drawn without animation.
    Use in Pugi: Line comparison

  • Donut chart

    Charts

    A ring that fills to show how a whole splits.

    Weight
    Light (0.7 KB); the chart library loads after the page
    Motion off
    Drawn without animation.
    Use in Pugi: Donut chart

  • Radial gauge

    Charts

    A gauge that sweeps to a single score or goal.

    Weight
    Light (0.7 KB); the chart library loads after the page
    Motion off
    Drawn without animation.
    Use in Pugi: Radial gauge

  • Sparkline

    Charts

    A tiny trend line beside a number.

    Weight
    Featherweight, CSS only
    Motion off
    Drawn at once.
    Use in Pugi: Sparkline

  • 3D hero

    3D and depth

    Your subject in real 3D: a jet, a yacht, a drone or your logo, in the sky, at sea or in a studio.

    Weight
    Showpiece (4.2 KB, then 420 KB after the page: the 3D engine and its model): one per screen
    Motion off
    A kit model (jet, yacht, sailboat): its still, and no 3D engine is loaded; other subjects: a still, composed frame per chapter (no flight, no steering).
    Use in Pugi: 3D hero

  • Cinematic page

    3D and depth

    The whole page as one 3D scene: the scroll flies the camera round a jet, yacht or GT car from day into night.

    Weight
    Showpiece (7.5 KB, then 590 KB after the page: the 3D engine and its model): one per screen
    Motion off
    Composed stills, one per shot (rendered from the same path), cross-fading as the chapters pass; no 3D engine is loaded.
    Use in Pugi: Cinematic page

  • Glass knot hero

    Hero

    A glass knot bending your brand's light, beside the headline.

    Weight
    Showpiece (8.8 KB, then 164 KB after the page: the 3D engine and its model): one per screen
    Motion off
    The scene's still (the knot at rest); no 3D engine is loaded.
    Use in Pugi: Glass knot hero

  • Globe hero

    Hero

    The Earth at dusk with glowing routes between ports and cities.

    Weight
    Showpiece (8.8 KB, then 501 KB after the page: the 3D engine and its model): one per screen
    Motion off
    The scene's still (routes drawn); no 3D engine is loaded.
    Use in Pugi: Globe hero

  • Car hero

    Hero

    A grand-touring coupé on a dark mirror floor under studio lights; or a concept car in your colour.

    Weight
    Showpiece (8.8 KB, then 967 KB after the page: the 3D engine and its model): one per screen
    Motion off
    The scene's still (a three-quarter frame); no 3D engine is loaded.
    Use in Pugi: Car hero

  • Payment card hero

    Hero

    A brushed-metal and a frosted-glass payment card floating in soft light.

    Weight
    Showpiece (8.8 KB, then 164 KB after the page: the 3D engine and its model): one per screen
    Motion off
    The scene's still (the two cards at rest); no 3D engine is loaded.
    Use in Pugi: Payment card hero

  • Split reveal

    Text

    Letters or words rise out of a mask as the line enters.

    Weight
    Light (1.4 KB)
    Motion off
    The text, still.
    Use in Pugi: Split reveal

  • Text scramble

    Text

    Glyphs decode into the word, left to right.

    Weight
    Featherweight, CSS only
    Motion off
    The text, still.
    Use in Pugi: Text scramble

  • Blur reveal

    Text

    Words come into focus one after another.

    Weight
    Featherweight, CSS only
    Motion off
    The text, still.
    Use in Pugi: Blur reveal

  • Shimmer text

    Text

    A light sweeps across a short label.

    Weight
    Featherweight, CSS only
    Motion off
    Still text.
    Use in Pugi: Shimmer text

  • Scroll text fill

    Text

    A paragraph lights up word by word as it scrolls through.

    Weight
    Light (1.6 KB)
    Motion off
    Full opacity.
    Use in Pugi: Scroll text fill

  • Masked text

    Text

    A photo or a video plays inside huge display type.

    Weight
    Featherweight, CSS only
    Motion off
    The photo inside the type, still.
    Use in Pugi: Masked text

  • Number ticker

    Text

    Odometer digits roll into place.

    Weight
    Featherweight, CSS only
    Motion off
    The number, still.
    Use in Pugi: Number ticker

  • Mesh gradient

    Backgrounds

    A slow moving mesh of four palette colours (WebGL).

    Weight
    Showpiece (3 KB): one per screen
    Motion off
    One still frame.
    Use in Pugi: Mesh gradient

  • Light rays

    Backgrounds

    Soft light rays fan down from the top (WebGL).

    Weight
    Showpiece (2.6 KB): one per screen
    Motion off
    One still frame.
    Use in Pugi: Light rays

  • Star field

    Backgrounds

    A deep night sky with drifting stars that lean toward the pointer.

    Weight
    Showpiece (1.8 KB): one per screen
    Motion off
    One still frame.
    Use in Pugi: Star field

  • Flicker grid

    Backgrounds

    A grid of small cells softly flickering in the accent colour.

    Weight
    Light (1.2 KB)
    Motion off
    A still grid.
    Use in Pugi: Flicker grid

  • Glow grid

    Cards

    A bento grid whose card borders light up near the pointer.

    Weight
    Featherweight, CSS only
    Motion off
    A still border.
    Use in Pugi: Glow grid

  • Stack cards

    Cards

    Cards stick and stack as you scroll; earlier ones shrink back.

    Weight
    Showpiece (1.4 KB): one per screen
    Motion off
    A plain stack.
    Use in Pugi: Stack cards

  • Testimonial wall

    Cards

    Columns of quotes drift slowly at different speeds.

    Weight
    Featherweight, CSS only
    Motion off
    A still grid.
    Use in Pugi: Testimonial wall

  • Logo cloud

    Cards

    Two rows of the owner's client logos run in opposite directions.

    Weight
    Featherweight, CSS only
    Motion off
    Still wrapped rows.
    Use in Pugi: Logo cloud

  • Shimmer button

    Buttons

    The main call to action with a slow light sweep.

    Weight
    Featherweight, CSS only
    Motion off
    A plain button.
    Use in Pugi: Shimmer button

  • Roll text

    Buttons

    The label rolls up to a copy of itself on hover.

    Weight
    Featherweight, CSS only
    Motion off
    A colour change.
    Use in Pugi: Roll text

  • Expand on scroll

    Scroll

    A framed photo or video grows to full bleed as it scrolls in.

    Weight
    Showpiece (1.2 KB): one per screen
    Motion off
    Full bleed, still.
    Use in Pugi: Expand on scroll

  • Velocity marquee

    Scroll

    Huge words run sideways; scroll speed pushes and skews them.

    Weight
    Featherweight, CSS only
    Motion off
    A still line.
    Use in Pugi: Velocity marquee

  • Parallax image

    Scroll

    A photo drifts slowly inside its frame on scroll.

    Weight
    Featherweight, CSS only
    Motion off
    Still photo.
    Use in Pugi: Parallax image

  • Circle reveal

    Scroll

    A circle opens over the next scene as you scroll.

    Weight
    Showpiece (1.2 KB): one per screen
    Motion off
    The image, shown.
    Use in Pugi: Circle reveal

  • Animated beam

    Transitions

    Light travels along curved wires between the brand and its connections.

    Weight
    Light (1.2 KB)
    Motion off
    Still wires.
    Use in Pugi: Animated beam

  • Orbit rings

    3D and depth

    Marks orbit the brand on rings with a travelling light; tilt lays them back in 3D.

    Weight
    Light (1.4 KB)
    Motion off
    Still rings.
    Use in Pugi: Orbit rings

  • Cursor trail

    Buttons

    A soft fading ribbon follows the pointer.

    Weight
    Featherweight, CSS only
    Motion off
    None.
    Use in Pugi: Cursor trail

  • Type window

    Hero

    One huge word is a window onto moving colour; scrolling flies through the letters.

    Weight
    Showpiece (1.7 KB): one per screen
    Motion off
    The word over a still colour field; no fly-through.
    Use in Pugi: Type window

  • Liquid shape

    Hero

    A glossy shape in your colours that slowly changes form beside the headline.

    Weight
    Light (2.2 KB)
    Motion off
    One composed still shape.
    Use in Pugi: Liquid shape

  • Photo trail

    Hero

    Moving the pointer leaves a trail of your photos that pop in and fade.

    Weight
    Light (2.1 KB)
    Motion off
    The photos rest in a composed arc.
    Use in Pugi: Photo trail

  • Split screen

    Hero

    Photo and message wipe in from opposite edges, then drift apart as you scroll.

    Weight
    Light (1.6 KB)
    Motion off
    Both halves at rest.
    Use in Pugi: Split screen

  • Tilted stack

    3D and depth

    Your product screens in a tilted 3D stack that fans apart under the pointer.

    Weight
    Light (1.9 KB)
    Motion off
    The stack, still and fanned.
    Use in Pugi: Tilted stack

  • Moving photo wall

    Hero

    A tilted wall of photos drifting in columns behind your headline.

    Weight
    Light (1.7 KB)
    Motion off
    The wall, still.
    Use in Pugi: Moving photo wall

  • Cinema opening

    Hero

    The picture opens from a thin slit into a wide cinematic frame.

    Weight
    Light (1.7 KB)
    Motion off
    The open frame, still.
    Use in Pugi: Cinema opening

  • Flashlight

    Hero

    A dark hero where a soft circle of light follows the pointer over the picture.

    Weight
    Light (1.9 KB)
    Motion off
    One still, wider pool of light.
    Use in Pugi: Flashlight

  • Scrubbed story

    Scroll

    Pictures change frame by frame as you scroll, with captions and a progress bar.

    Weight
    Showpiece (2.1 KB): one per screen
    Motion off
    The frames and captions as a plain list.
    Use in Pugi: Scrubbed story

  • Sliding timeline

    Scroll

    Your history slides sideways while the line fills and each year lights up.

    Weight
    Light (2 KB)
    Motion off
    A row to swipe or scroll sideways, all entries lit.
    Use in Pugi: Sliding timeline

  • Drawn path

    Scroll

    A line draws itself down the page with a glowing tip, linking the steps.

    Weight
    Light (1.7 KB)
    Motion off
    The whole line, drawn.
    Use in Pugi: Drawn path

  • Doorway zoom

    Scroll

    Scrolling flies through an arched doorway into the picture behind it.

    Weight
    Showpiece (1.7 KB): one per screen
    Motion off
    The wall with the open doorway, still.
    Use in Pugi: Doorway zoom

  • Depth gallery

    3D and depth

    Photos hang at different depths and the scroll carries you through them.

    Weight
    Showpiece (1.8 KB): one per screen
    Motion off
    The layered picture, still.
    Use in Pugi: Depth gallery

  • Words on a wave

    Text

    A line of words runs along a curve and slides with the scroll.

    Weight
    Light (1.7 KB)
    Motion off
    The words on the curve, still.
    Use in Pugi: Words on a wave

  • Stripe reveal

    Scroll

    A photo appears as vertical stripes lift one after another.

    Weight
    Light (1.4 KB)
    Motion off
    The photo.
    Use in Pugi: Stripe reveal

  • Flipping letters

    Text

    Letters roll into place on a 3D hinge, one after another.

    Weight
    Light (1.6 KB)
    Motion off
    The text, still.
    Use in Pugi: Flipping letters

  • Typewriter

    Text

    The headline types its last words, erases them and types the next.

    Weight
    Light (1.6 KB)
    Motion off
    The first ending, still, no caret.
    Use in Pugi: Typewriter

  • Marker sweep

    Text

    A marker sweeps behind the words that matter, one after another.

    Weight
    Featherweight, CSS only
    Motion off
    The marks, already drawn.
    Use in Pugi: Marker sweep

  • Bento grid

    Cards

    Feature tiles of different sizes; the one under the pointer lifts toward you.

    Weight
    Featherweight, CSS only
    Motion off
    The tiles, still, a plain hover border.
    Use in Pugi: Bento grid

  • Flip cards

    Cards

    Cards turn over to show what is included, by hover or a tap.

    Weight
    Light (1.7 KB)
    Motion off
    The faces cross-fade.
    Use in Pugi: Flip cards

  • Smooth FAQ

    Cards

    Questions open smoothly to their answers; the plus turns into a minus.

    Weight
    Featherweight, CSS only
    Motion off
    Opens at once.
    Use in Pugi: Smooth FAQ

  • Drag carousel

    Cards

    An endless row of reviews that glides by itself and can be dragged.

    Weight
    Light (2.2 KB)
    Motion off
    A row the visitor scrolls or swipes.
    Use in Pugi: Drag carousel

  • Before and after

    Cards

    Two photos of the same place with a handle to compare them.

    Weight
    Light (2 KB)
    Motion off
    No nudge; the slider works.
    Use in Pugi: Before and after

  • Dot wave

    Backgrounds

    A grid of dots swelling in slow waves, rippling around the pointer.

    Weight
    Light (2.6 KB)
    Motion off
    One still frame of the wave.
    Use in Pugi: Dot wave

  • Contour lines

    Backgrounds

    Map-like contour lines that slowly shift behind a section.

    Weight
    Light (2.6 KB)
    Motion off
    One still map.
    Use in Pugi: Contour lines

  • Soft glow

    Backgrounds

    Soft, out-of-focus lights in your colours drifting slowly upward.

    Weight
    Light (3 KB)
    Motion off
    One still frame.
    Use in Pugi: Soft glow

  • Halftone photo

    Backgrounds

    A photo redrawn as print dots that breathe; a lens swells them under the pointer.

    Weight
    Light (3.1 KB)
    Motion off
    One still halftone.
    Use in Pugi: Halftone photo

  • View transitions

    Transitions

    Views change with a settling fade, or open as a circle from your click.

    Weight
    Featherweight, CSS only
    Motion off
    The plain change.
    Use in Pugi: View transitions

  • Gliding menu

    Buttons

    The menu underline glides to the link under the pointer; links lean toward it.

    Weight
    Light (2 KB)
    Motion off
    The underline jumps, no lean.
    Use in Pugi: Gliding menu

  • Blend cursor

    Buttons

    A disc follows the pointer, inverts what it passes and swells over links.

    Weight
    Light (1.6 KB)
    Motion off
    None.
    Use in Pugi: Blend cursor

  • Smooth jumps

    Transitions

    Menu links glide to their section and highlight where you landed.

    Weight
    Featherweight, CSS only
    Motion off
    An instant jump, focus and the highlight.
    Use in Pugi: Smooth jumps

  • Form feedback

    Buttons

    The send button turns into a spinner, then a drawn check, and a toast confirms.

    Weight
    Light (1.7 KB)
    Motion off
    The same states, no spin travel or shake.
    Use in Pugi: Form feedback

Built to stay fast

  • One showpiece per screen. Effects marked Showpiece are the moment a page is remembered for; Pugi keeps them apart so the page stays smooth.
  • Motion off means calm. If a visitor asks their device for less motion, every effect shows its still version.
  • Phones get their own version. Pointer effects turn into scroll or tap versions on touch screens.