REVACSS / AN EXPERIMENT IN DEPTH

Every piece.
One possibility.

A heading. A card. A little room to breathe.
Scroll to see separate ideas find their place.

Enter the blueprint Explore the building blocks
01 — Pieces into place 02 — A study in depth 03 — Your next idea

01 / THE ASSEMBLY

A place for every piece.

Choose the movement intensity

Your browser does not support the scroll animation used here. You can still explore the completed composition. A static composition is active for your current settings or window size. Every piece is here to explore, with or without animation.

an idea, taking shape
form / function Independent ideas. Shared direction. Build your version
Study 001 / Form meets possibility
A shared foundation

Less repetition. More intention.

Real RevaCSS cards, actions and typography, brought together.

ONE PALETTE / MANY PIECES

Change the appearance with Customize.

The pieces share an intensity. Each chooses its own direction, rotation and arrival.

02 / A STUDY IN DEPTH

Same foundation.
Different perspectives.

A quieter composition: opposing movement, independent zoom, and a stable heading.

BACKGROUND

A little perspective.

Different distances. A common centre.

03 / YOUR NEXT IDEA

Take the pieces.
Make something yours.

This is an experimental demo, with its effects isolated from the RevaCSS core. The animation is CSS; the optional appearance customizer uses the existing documentation helper.

Shared settings. Local choices.

<section class="parallax parallax-expressive parallax-up">
  <article class="card parallax-layer">
    I inherit the movement.
  </article>
  <article class="card parallax-layer parallax-level-8
                  parallax-down-right parallax-zoom-in
                  parallax-zoom-level-3">
    I choose my own direction and zoom.
  </article>
</section>

Classes set inherited CSS custom properties. Levels 1–10 select 10%–100% of the configured maximum travel. Zoom has a separate scale.

Adjust the travel and scroll range

Set --parallax-max to a CSS length on your own parent class. The prototype default is min(30vw, 35vh); it is a responsive starting point, not a standard. Optional --parallax-max-x and --parallax-max-y override individual axes.

Equal axis maxima preserve equal diagonal travel. Set --parallax-start and --parallax-end to percentages within the scene’s contain range. Zoom uses --parallax-zoom-max (default .4); custom start/end scales can use --parallax-scale-start and --parallax-scale-end.

A small vocabulary.
A wide open canvas.

  • Intensity: subtle, expressive, dramatic, or ten numbered levels.
  • Direction: up, down, left, right, up-left, up-right, down-left, down-right.
  • Zoom: in, out, or none, with ten independent levels.
  • Composition: rotation, phased arrival, fade and static overrides.

Unsupported browsers, reduced motion, narrow screens and print receive the finished, readable layout. This prototype has not completed browser or device testing.

Download starting HTML ↓

Effects CSS · Composition CSS

Download the linked RevaCSS assets too, then update the paths for your own hosting. See the installation guide.