Experimental / Future release candidates

A little light.
A little life.

Small interactions can change how an interface feels. Explore three studies in light, weight and depth.

Explore the experiments About this collection

THREE STUDIES / HTML + CSS + SVG

01 / Aura 02 / Spring lift 03 / Layered depth Demo only · No release commitment

Hover an interactive card or use Tab to focus its link. On mobile, tap the card once to play the same effect. It returns automatically after a short preview. Its links still open normally.

Movement is disabled by your motion settings. Static lighting feedback remains available.

01 / AURA

A little light.

A soft wash of palette colour appears across the surface. Light responds to attention, without changing the card’s material.

RESTING REFERENCE

Quiet orbit

A gentle glow. The same familiar surface.

Explore aura

Reference · No effect

INTERACTIVE CANDIDATE

Quiet orbit

A gentle glow. The same familiar surface.

Explore aura

Tap the card · Same effect as hover

Fixed gradient origins · No cursor tracking Uses your selected palette and material

02 / SPRING LIFT

A sense of weight.

The card lifts, moves just beyond its resting point, then settles. A small gesture with a spring-like response.

Reference · No effect

Tap the card · Same effect as hover

Predefined easing · No physics engine Uses your selected palette and material

03 / LAYERED DEPTH

Another dimension.

Three decorative layers move by different amounts. The artwork gains depth while text and links keep their place.

Reference · No effect

Tap the card · Same effect as hover

Decorative layers move · Content stays steady Uses your selected palette and material

04 / IN COMBINATION

Better together?

A final study combines all three responses. Compare the quiet reference with the interactive card and decide how much movement feels right.

Reference · No effect

Tap the card · Same effect as hover

05 / THE OPEN LAB

An idea in progress.

Experimental effects — candidates for a future RevaCSS release. Their names and controls may change after feedback and validation.

Try the prototype.

<html class="effects-site" data-theme="auto">
  <!-- Load matching RevaCSS CSS, then experimental-effects.css. -->
  <main id="main" class="ef-lab">
    <div class="ef-tap-surface">
      <svg class="ef-input-state" width="1" height="1"
           aria-hidden="true" focusable="false">
        <set attributeName="class" to="ef-input-state ef-tapped"
             begin="exampleTap.click"
             dur="1.6s" restart="always" fill="remove" />
      </svg>
      <article class="card ef-effect ef-aura">
        <button id="exampleTap" class="ef-tap-target" type="button"
                aria-label="Play Aura preview"></button>
        <span class="ef-light" aria-hidden="true"></span>
        <div class="ef-card-content">
          <h2>Your own surface</h2>
          <a href="#details">Explore the details</a>
        </div>
      </article>
    </div>
    <section id="details"><h2>Details</h2></section>
  </main>
</html>

The draft classes are local to this demo. A native button covers the card’s preview area, with its links remaining separately clickable. An SVG set element listens to that button’s click and changes its own class for 1.6 seconds. A direct sibling CSS selector reads that state and applies the same targets, durations and easing as desktop hover. The marker then resets and CSS animates back. Use unique alphanumeric event-source IDs for each instance. No JavaScript or inline event hooks are emitted.

What the effects actually do

Aura fades fixed gradients. Spring lift uses a predefined easing curve with a standard easing fallback. Layered depth translates decorative spans. None reads cursor coordinates or calculates live forces.

Keep the foundation small.

  • Effect CSS and showcase CSS are separate files.
  • Hover and keyboard-visible focus are CSS. A normal mobile tap activates a native button and declarative SVG timing; all visual effects remain CSS.
  • Motion None and reduced-motion preferences stop movement.
  • Contrast, transparency and print preferences have conservative fallbacks.
  • The existing customizer changes palettes, materials and motion. Its optional JavaScript is separate from the effects.

Browser, touch-device and accessibility acceptance checks remain deferred. This showcase is for exploration, not a completed release or conformance claim.

Download starting HTML

Effect CSS · Showcase CSS

Download the linked RevaCSS assets too and update paths for your hosting. See the installation guide and custom-component contract.