Cube, curtain, prism

Select a transition with a stable input map

One numbered input chooses the visual effect without changing gallery logic. Configuration lives in inputs/effect-inputs.js. The map lives in template/app.js. The look lives in CSS.

That boundary lets you add a new transition without rewriting the timer, image creation, or content data.

export const EFFECT_INPUTS = {
  imageTransition: "cubeFlip",
  imageTransitionMs: 850,
  imageIntervalMs: 5200,
};

JavaScript owns the state decision

TRANSITION_CLASS maps one bounded name to one CSS class. Unknown names fall back to an empty string — no spiralWarp, no invented effect.

const TRANSITION_CLASS = {
  crossfade: "",
  slide: "transition-slide",
  clipReveal: "transition-clip",
  cubeFlip: "transition-cube",
  curtainReveal: "transition-curtain",
  zoomFade: "transition-zoom",
};

Cube flip — rotate from the right edge

The inactive state is rotated 90 degrees and slightly reduced. The active state is flat and full scale. perspective() creates depth. transform-origin: center right makes the motion read like a card turning.

.gallery-image.transition-cube {
  opacity: 0;
  transform: perspective(1100px) rotateY(90deg) scale(.92);
  transform-origin: center right;
}

.gallery-image.transition-cube.is-active {
  opacity: 1;
  transform: perspective(1100px) rotateY(0deg) scale(1);
}

Curtain reveal — open from the center

The left and right inset values begin at 50%, so only the center strip is visible. The active state removes the insets and returns the image to normal scale.

.gallery-image.transition-curtain {
  clip-path: inset(0 50% 0 50%);
  transform: scale(1.06);
  opacity: 0;
}

Every custom transition uses three files

Input 9 names the effect. The JavaScript map selects the class. CSS writes inactive and active states. prismReveal is the same contract with a different visual language.

Glossary

Input 9

The effect-inputs field that names the gallery transition.

is-active

The CSS state that completes cube, curtain, or prism.

prismReveal

A later transition that still uses the three-file contract.