Prismatic ice
Live browser animation
Round frameSVG + CSS
Diamond
Crisp white facets with blue prism flashes and a fast, glassy sweep that feels closest to a polished cut diamond.
Best for high-contrast sparkle and the brightest reflections.
Browser Demo
Fifteen gemstone animations,
viewable in any browser.
Preview every gem in the GemmWatch collection — Diamond, Ruby, Sapphire, Emerald, Amber, Amethyst, Aquamarine, Opal, Pink Tourmaline, Tiger’s Eye, Obsidian, Garnet, Labradorite, Jade, and Pearl — directly on the web without Xcode, an Apple Watch, or native tooling.
15 animated gemstonesPure SVG + CSSNo device setup required
The full collection
Each gem has a unique optical effect — facet sweeps, chatoyance, play-of-color, labradorescence, nacre lustre, and more.
15Gem variants
0Native dependencies
1Public URL
Velvet flare
Live browser animation
Soft squareSVG + CSS
Ruby
Deep carmine facets with magenta edges and a warm pulse that makes the gemstone feel dense, hot, and theatrical.
The richest saturation in the set, with a slower bloom around the edges.
Midnight blue
Live browser animation
Round frameSVG + CSS
Sapphire
Royal blue planes cut with cold highlights and a focused beam sweep tuned for a calm, premium watch-face feel.
Closest to the original GemmWatch tone palette used on the landing page.
Forest light
Live browser animation
Soft squareSVG + CSS
Emerald
Green facets with cool mint highlights and a wider glow halo that makes the stone feel alive without over-brightening it.
The softest motion profile, built around depth instead of flash.
Honey fire
Live browser animation
Round frameSVG + CSS
Amber
Golden-orange planes with warm reflections and a broad light pass that sells the feeling of resin catching sunlight.
The warmest card in the group and the easiest one to read at a glance.
Violet crystal
Live browser animation
Soft squareSVG + CSS
Amethyst
Layered violet facets with shifting purple highlights and four-pointed crystal sparkles — the classic quartz brilliance of a cut amethyst.
Violet sweep cycles slower than diamond, giving a dreamy, meditative feel.
Crystal water
Live browser animation
Round frameSVG + CSS
Aquamarine
Blue-green facets with two overlapping light sweeps that mimic the way light bends through pure tropical water. Very transparent look.
Dual sweep angles make it unique — one fast, one slow, both aqua-toned.
Play of color
Live browser animation
Round frameSVG + CSS
Opal
Shifting rainbow patches float across a white-gray body, cycling through violet, teal, gold, and back — the optical magic that makes opal irreplaceable.
The most complex animation: four independent hue patches orbit the stone simultaneously.
Rose flash
Live browser animation
Soft squareSVG + CSS
Pink Tourmaline
Hot-pink and rose facets with a fast bright sweep and five glinting sparkle points — the cheerful, high-energy cousin of ruby.
Fastest sweep cycle of the new gems; sparkle points are more numerous than diamond.
Chatoyant ray
Live browser animation
Soft squareSVG + CSS
Tiger's Eye
A golden band of light glides back and forth across warm brown silk — the chatoyance that makes tiger's eye one of the most hypnotic stones in nature.
No crystal facets here: the shape is a smooth rounded rectangle to match the cabochon cut.
Volcanic sheen
Live browser animation
Round frameSVG + CSS
Obsidian
Nearly black volcanic glass with three independent iridescent color blooms — violet, teal, and gold — orbiting the crystal surface.
The darkest and most minimal card; the color patches are intentionally dim to preserve the stone's mysterious nature.
Blood depth
Live browser animation
Soft squareSVG + CSS
Garnet
Wine-dark facets with a focused crimson sweep and a deep inner glow — the color is darker and less saturated than ruby, emphasizing depth over flash.
The secondary depth glow pulses gently at the girdle of the stone.
Blue-gold flash
Live browser animation
Round frameSVG + CSS
Labradorite
Dark charcoal base with three dramatic color flashes — blue, teal, and gold — that blaze across the facets independently, mimicking the famous labradorescence.
Each flash has its own cycle duration, so the color combination is never the same twice.
Silky green
Live browser animation
Soft squareSVG + CSS
Jade
Smooth cabochon shape with a deep green radial gradient, subtle internal veining, and a slow silk highlight that drifts across the stone's face.
No sharp facets — jade is always cut as a cabochon, so the shape is a rounded rectangle.
Nacre lustre
Live browser animation
Round frameSVG + CSS
Pearl
Cream-white sphere with layered nacre rings and three soft iridescent blooms in pink, blue-green, and gold that drift and pulse slowly.
The only fully circular gem in the set with no faceting — the luster comes from concentric ring strokes.
Implementation notes
Each card uses inline SVG facets, CSS custom properties, and keyframe-driven glow and sweep layers. That keeps the demo light, static-build friendly, and easy to render in standard browsers.