The color properties
| Property | Type | Default | Description |
|---|---|---|---|
| color | color string | (inherited) | The text color of the element. Animates between two colors smoothly through intermediate hues. |
| bgColor | color string | (inherited) | The background color of the element. Same color picker, same format, applies to background instead of text. |
Both properties default to the element’s inherited value, so an animation that doesn’t set them at the start uses whatever your CSS already specifies.
Color formats accepted
The color picker and the underlying field accept:
- Hex:
#bdfe1b(3-digit, 6-digit, with or without leading hash). - rgb / rgba:
rgb(189, 254, 27)with optional alpha as a fourth value. - hsl / hsla:
hsl(72, 99%, 55%). - Named colors:
white,black,transparent, and the rest of the CSS named color list.
Glopzi normalizes them all internally. Whatever you paste in, the picker shows the consistent format the editor uses.
The color picker
Click the color swatch next to a color property to open the picker. It has:
- A 2D saturation/value canvas to pick visually.
- A hue slider down the side.
- An alpha slider for transparency.
- A text field that shows the current hex (and accepts any of the formats above).
Changes preview live in the canvas. Click outside to commit.
Note
Color animations interpolate through the RGB color space. Two colors that look smooth in CSS animate smoothly in Glopzi without surprises.
Useful patterns
- Hover color sweep. A button text color animates from white to a brand accent on hover. Time animation, hover trigger, color from white to the brand color.
- Section background dim. Background color animates from light to dark as the visitor scrolls into a content section. Scroll animation, bgColor from #ffffff to #0e1318.
- Reveal headline color. Text starts in a muted color and animates to the brand color with a split-text stagger. Each word lights up in sequence.
Next steps
- Visual: opacity, blur, brightness, contrast, saturate, grayscale for non-color visual effects.
- WebGL backgrounds for animated backgrounds beyond a single color.
- Animating text (split text) pairs naturally with color animations.