Skip to main content

Sitejet Creations

Menu version 2 

Subtle hover interaction for depth

What is

A layered, full-page gradient canvas that creates depth without images or video.

Why it matters

Modern “premium” feel with minimal cost: fast rendering, clean UI hierarchy, no clutter.

How it’s built

CSS layers + Sitejet UI containers. Motion only on cards (GPU-friendly transforms).

What this demo shows
– CSS-only glossy canvas
– UI-safe layering (z-index)
– Works with Sitejet containers
– No JS, no hacks

Glossy Background Canvas (Sitejet)


• CSS-only (no JS)

• GPU-friendly (transform + opacity)

• Works with Sitejet UI containers

• UI stays fully clickable (z-index layering)

• One slow glossy sweep with end hold

• Respects prefers-reduced-motion


How to use:

1. Add class `sj-shiny-canvas` to a Section (100vh, relative, overflow hidden)

2. Place UI normally inside the section

3. Optional: add glossy cards with class `sj-gloss-card`


Footer

Happy builds with Sitejet — glossy canvas, calm motion, clean UI

Built as an exploration of depth, restraint and UI clarity.