Plainware Motion Pro
/21 code components
Components
Buttons and links
Scroll
/Component · 01
Scramble Text
Letters resolve out of random glyphs, left to right. Every glyph is drawn on top of the letter it replaces, so lines never reflow and the final text is exactly what you typed.
How to use → Insert Scramble Text, type your copy, pick a trigger.
Mono labels · In View · Delay
> SYSTEM STATUS: ONLINE
> DEPLOYING TO 312 EDGES
> BUILD 2026.09 PASSED
In View + Hover · Symbols
Wrapping paragraph · Binary
/Component · 02
Rolling Text
Each letter rolls up to a copy of itself on hover, in a wave. It works as a link, in a navigation, or inside any button: set Hover Target to Parent and the whole button triggers it.
How to use → Drop Rolling Text inside a button and set Hover Target to Parent.
Inside buttons · Hover Target: Parent
Navigation · Stagger 0.35
Large · Direction: Down · Hover Color
/Component · 03
Scroll Reveal Text
A paragraph that reads itself in. Words go from muted to full color as the text scrolls up the screen, and fade back when you scroll the other way. The real text stays one plain element, so it can be selected and indexed.
Controls → Text, Tag, Split by word or letter, Font, From and To colors, Start, End, Softness.
By word · start 85% · end 45% · softness 2
/Component · 04
Split-Flap Counter
A number that flips into place digit by digit, like the departure board in a train station. Every cell is exactly one digit wide, so nothing around it moves, and separators stay where they are.
Controls → Value, Prefix, Suffix, Duration, Delay, Once, Font, Digit and background colors, Cell gap, radius and padding.
Thousands separator · 1.6 s
Prefix · delay 0.15 s
Suffix · delay 0.3 s
/Component · 05
Count Up
Type the figure the way it should end, like 1,400+, $2.5M or 98%, and it counts up when it scrolls into view. Prefix, suffix, decimals and separators are kept, and the box never changes size.
How to use → Type the final figure into Value. Nothing else to set.
Prefix · decimal · suffix
Thousands separator
From 0 · Ease Out · 2 s
/Component · 06
Magnetic Button
A call to action that leans toward the cursor as it gets close, with the label trailing a little behind, then springs back when the cursor moves on. Touch screens get a normal button.
Controls → Label, Link, Icon, Radius, Strength, Font, Text and fill colors, Hover colors, Border, Padding, Corner radius.
Paper pill · radius 80 px · strength 0.35
Outline · strength 0.5
Large · radius 160 px · no icon
/Component · 07
Arrow Button
A complete call-to-action: the label rolls letter by letter while the arrow slides out and a fresh one slides in. Pick →, ↗ or a chevron, put it in a filled circle, left or right. It renders a real link or button and reacts to keyboard focus.
How to use → Insert Arrow Button, set Label and Link, style the pill in the panel.
/Component · 08
Slide Link
On hover the link text slides out while a copy slides in from the other side. The clip is exactly as wide as the text, so nothing shows next to it, and it runs on plain CSS: it works before the page hydrates and on keyboard focus too.
How to use → Insert Slide Link, type the text, set Link and a direction.
/Component · 09
Parallax Image
An image that moves slower than the page inside its frame and settles from a slight zoom as it comes into view. The picture is oversized by exactly the travel, so an edge never shows.
Controls → Image, Strength, Scale From, Radius, Focus.
Strength 8% · scale from 1.10
Strength 14% · scale from 1.15
Strength 20% · scale from 1.20
/Component · 10
Image Reveal
A clip-path wipe uncovers the image when it scrolls into view while the picture settles from a slight zoom. The start state is part of the served page, so nothing flashes before it loads.
Controls → Image, Direction (up, down, left, right, center), Duration, Delay, Scale From, Once, Radius.
Up · 1.2 s
Left · delay 0.1 s
Center · delay 0.2 s
/Component · 11
Sticky Stack
Cards pin to the top of the screen and pile onto each other as you scroll. Every covered card shrinks a little, so the stack reads as depth. Plain CSS sticky does the pinning.
Controls → Cards (title, text, image, background), Top Offset, Stack Offset, Spacing, Scale Step, Card Height, Radius, Numbers, Fonts, Colors.
/Component · 12
Horizontal Scroll
The section pins to the screen and scrolling down slides a row of panels sideways. Its height is worked out from the number and width of the panels, so the page never jumps while it loads.
Controls → Heading, Label, Panels (image, title, caption), Panel Width, Gap, Side Padding, Image Ratio, Radius, Fonts, Colors.
/Component · 13
Velocity Marquee
An endless row of words or images that runs at a steady pace, speeds up while the page scrolls and turns around when you scroll back up. It fills any width and slows to a stop under the cursor.
Controls → Content (text or images), Items, Separator, Font, Colors, Speed, Scroll Boost, Direction, Flip on Scroll Up, Gap, Pause on Hover.
Text · 60 px/s · scroll boost 4 · flips on scroll up
Images · moving right · 40 px/s · pause on hover
/Component · 14
Scroll Progress
A thin bar that fills as the visitor reads down the page. Pinned sits on the top or bottom edge of the browser window, In Frame fills any layer you place it in. The lime to aqua line at the top of this page is the same component.
Controls → Mode, Position, Height, Color, Track, Smoothing, Z Index.
In Frame · height 6 px · smoothing 0.3
/Component · 15
Image Trail
Moving the cursor over the area leaves a trail of images that pop in at the pointer and fade away. A small pool of images is reused, so a long session never piles up elements.
Controls → Images, Spacing, Lifetime, Size, Ratio, Radius, Label, Font, Colors.
/Component · 16
Grain Overlay
A light film grain for the whole page or a single frame. The noise is drawn once and only shifted a few times per second, so it costs almost nothing, and clicks pass straight through.
Controls → Covers (page or frame), Opacity from 0 to 0.2, Blend, Grain Size, Animated, Frames per second, Z Index.
Frame · default opacity 0.06
Frame · opacity 0.14 · larger grain
Frame · opacity 0.1 · still
/Component · 17
Light Field
Slow ribbons of light drawn on a canvas, for hero backgrounds and the moments that sit behind glass. It is the light behind this whole site. The loop pauses when the layer scrolls out of view or the tab is hidden, the pixel ratio is capped at 1.5, and visitors with reduced motion get one still frame.
Controls → Color 1, Color 2, Third Color, Direction, Speed, Intensity, Glow, Ribbons, Spread, Offset, Seed, Fade Edges, Fade In, Grain.
Rising · 3 colors · grain on
Glass over light: 35% raised black and a 60 px background blur. Put it only where the light is behind it.
Falling · white to aqua · radial fade
Horizontal · slow · 5 ribbons · grain off
/Component · 18
Aurora
Curtains of light hanging from above, brightest along a swaying hem, with fine rays running up into the dark. It is drawn at low resolution and scaled up, so it stays soft and costs little. Like every Plainware background it pauses off screen, runs at 30 frames per second and shows one still frame to visitors with reduced motion.
Controls → Color 1, Color 2, Third Color, Curtains, Height, Hem Position, Sway, Rays, Speed, Intensity, Seed, Fade Edges, Fade In, Frame Rate.
Lime to aqua · 4 curtains · hem at 62%
Warm · amber to cream · 5 curtains
High hem · white to aqua · strong rays
/Component · 19
Light Beams
Soft volumetric rays that fall in from a corner, like light through a high window. Each beam is a wedge that brightens near its source, sways a little and breathes in brightness. Pick the corner, how many beams, how wide they fan out and how far they reach.
Controls → Color 1, Color 2, Third Color, Source, Beams, Spread, Reach, Sway, Breathe, Source Haze, Speed, Intensity, Seed, Fade Edges, Fade In, Frame Rate.
Top left · 8 beams · spread 42°
Top · white and aqua · 12 beams
Bottom right · lime · narrow fan
/Component · 20
Dust
Luminous motes drifting through the dark with depth: far ones small, dim and slow, near ones larger, softer and quicker, and every mote twinkles a little. Each glow is a tiny sprite drawn once and stamped, so hundreds of motes stay cheap.
Controls → Color 1, Color 2, Third Color, Density, Size, Depth, Drift, Twinkle, Speed, Intensity, Seed, Fade Edges, Fade In, Frame Rate.
Float · density 1.4 · depth 0.8
Rising · dense · white
Drifting left · large · lime and aqua
/Component · 21
Contour Lines
Topographic lines over a slowly shifting landscape. Where the terrain gets steep the lines bunch together and glow brighter, so the picture has depth without any fill. The height field is traced on a coarse grid and drawn in a handful of strokes.
Controls → Color 1, Color 2, Third Color, Lines, Terrain Size, Line Width, Glow, Speed, Intensity, Seed, Fade Edges, Fade In, Frame Rate.
14 lines · glow 0.6 · lime to aqua
Tight terrain · 24 lines · aqua
Wide terrain · white · no glow