What it says.
Texts, photos, links and list items: what the tile tells.
How it looks.
Colors, fonts, borders, spacing and sizes, even different for computer, tablet and phone.
How it behaves.
When it enters the scene, how it moves, who it's shown to, where it sits. The catalog's examples barely touch it.
Takes the stage.
35 animations for the tile's arrival: fade, slide, zoom, rotation, bounce, typewriter, wipe… Duration, delay, intensity and curve are adjustable: different tiles can come in one after another.
Comes back on every pass.
17 more animations, from fade to Ken Burns, that start when the tile reaches the screen. They can restart every time you pass by again, and bring in what the tile contains in sequence.
Scroll up a little
and back down: it enters again every time.
Moves with the page.
As you scroll, the tile moves, rotates, changes size, transparency or blur, at a pace all its own. Each property has its own stops, from the start to the end of the journey.
Follows a curve.
You draw a path in the builder and the tile follows it as you scroll. At each stop you decide position, rotation, size and transparency.
Stays where it's needed.
The tile stays put while the rest of the section scrolls, and moves on by itself when the section ends: a table of contents, a photo, a buy button. At the top or at the bottom, at the distance you want, on the phone too.
You're seeing it right now: on computer and tablet, the list of the eight effects next to this text uses exactly this option.
Responds to the mouse.
The 3D tilt follows the pointer, even just on the photos of a gallery. The tile can chase the cursor, or switch on a flashlight that inverts the colors under the pointer. And for the whole site there are the magnetic cursor, which clings to links and buttons, and the crosshair with coordinates. On the phone, where there's no mouse, the page stays as it is.
Turn on
the light.
Never stands still.
Eight movements that repeat endlessly: floating, also with rotation, pulsing, rotation, swaying, bouncing, oscillation and breathing. Speed, amplitude, delay and direction are adjustable: perfect for icons, badges and decorations.
Takes shape.
Crop the tile into a shape: circle, ellipse, triangle, hexagon, star, diamond, blob, or a shape of your own written in CSS. It works for photos, videos, cards and text.
Each photo stops at a different distance from the top: as you scroll, the next one lands on top of it. Just four tiles with Fixed scroll, nothing else.
Scroll slowly and watch the deck build up.
To those who need it,
when they need it.
A tile can be there for some people and not for others. The server checks the conditions: whoever shouldn't see the tile doesn't even receive it.
Wide window:
you're on a computer.
Medium window:
maybe a tablet.
Narrow window:
you're on a phone.
There are three sentences here, one per format, and you only see one. On a computer, try narrowing the window.
Exactly
where you want.
Usually a tile takes up the full width of the column and follows the others. But you can move it, overlap it or pin it to the screen, with different values for each device.
For those who read,
and for those who search.
The same tiles speak well to screen readers and search engines, with no extra plugins.