Pixel type
<piix-type> turns any font into chunky blocks with an extruded shadow. Pixels rain in on load, lift around the cursor and ripple when clicked. Pals can walk on it: it exposes the real letter outline.
Customise
Click the letters for a ripple. The bug walks the actual tops of the blocks.
piix-type
Shape
Shadow
Replay
Attributes
| Attribute | What it does | Default |
|---|---|---|
text | the text; | for a line break | element text |
rows | rasterising resolution: letter height in blocks | 18 |
cell | size of one block in CSS px | 8 |
fit | shrink blocks to fit the container width | off |
color / shade | block colour / shadow colour | currentColor / none |
depth | shadow depth, in blocks | 1 |
gap | gap between blocks, as a fraction of a block | 0.1 |
shape | square dot round plus diamond: how each block is drawn | square |
font / weight | font family and weight to rasterise; any loaded font works | inherited / 800 |
align | left center right for multi-line text | left |
intro | none skips the rain-in | on |
Methods: replay() rains it in again. Pals use piixSurface(x) to find the letter tops and piixImpact(x, y) to send a ripple when they land.