Entrances and Transitions

Entrance Animations

Set with the enter: modifier on any element. Entrances are driven by spring physics — the mood controls how bouncy, snappy, or smooth they feel.

Entrance Motion Best for
fade Opacity only Subtle, neutral, safe default
rise Slides up + fades Professional, authoritative
drop Slides down + fades De-escalation, grounding
push Slides from side + fades Narrative shifts, new topics
scale Scales from small + fades Importance, zoom-in effect
pop Scales with overshoot Announcements, excitement
typewriter Characters appear sequentially Quotes, terminal aesthetic
cascade Characters cascade in Dramatic text reveals
reveal Mask wipe reveals content Cinematic, high-end
blur Deblurs into focus Dreamlike, transitions
glitch Digital glitch effect Tech, edgy, futuristic
bounce Drops in with bounce Fun, energetic, physical
cut Instant appearance Urgency, hard cuts
split Slides in from right Counterpoint to push

Directional Variants

Some entrances support direction:

text
show "Hello"
  enter: push from left
  exit: push to right

Mood-Dependent Feel

The same entrance type feels different across moods. A pop in playful mood has more overshoot (bouncier). A pop in elegant mood settles smoothly with no bounce. The spring physics parameters (mass, tension, friction) change per mood — you do not need to tune them.

Default Selection

If you omit enter:, the compiler picks an entrance based on mood and scene intent. Confident defaults to fade. Playful defaults to bounce. Dramatic defaults to rise. The intent further refines the choice — a cta intent scene prefers pop, a problem intent prefers fade.

Exit Animations

Set with exit:. Uses the same animation names as entrances.

text
show "Temporary message"
  enter: rise
  exit: fade

The compiler automatically picks a complementary exit if you omit it — rise entrance gets fade exit, pop gets scale exit. You rarely need to set this manually.

Scene Transitions

Set with transition: on a scene. Controls how the scene enters from the previous scene.

Transition Effect
cut Instant switch (default)
fade Crossfade between scenes
dissolve Gradual blend
push New scene slides in
wipe Wipes across the frame
morph Shape-based morph

Transition duration is mood-dependent and tempo-scaled. A fade transition in dramatic mood is slower than in urgent mood.

Spring Physics

All entrance animations are driven by spring dynamics rather than eased curves. Each mood defines spring parameters:

  • Mass — heavier elements move more slowly (dramatic has high mass)
  • Tension — higher tension means snappier motion (urgent has high tension)
  • Friction — higher friction means less overshoot (elegant has high friction)
  • Damping — controls how quickly the spring settles (playful has low damping = more bounce)

These parameters are set by the mood and are not exposed directly in the .ws language. They ensure that motion feels physically grounded rather than mathematically eased.

Next Steps