Veto
Components

Tilt 3D

Tilts its content in three dimensions as the pointer crosses it, as though the surface were being pushed.

Basic

Wrap anything. Move the pointer across the card and watch the surface follow it; move away and it settles back.

Hover me

The whole card is the tilt surface.
razor
<VetoTilt3D>
    <VetoCard Title="Hover me" Elevation="VetoElevation.Raised">
        The whole card is the tilt surface.
    </VetoCard>
</VetoTilt3D>

How far it tilts

MaxTilt is the angle at the edges; Perspective is how near the vanishing point sits. A shorter perspective exaggerates the same angle.

Subtle

MaxTilt 5

Default-ish

MaxTilt 14

Strong

25°, 600px
razor
<VetoTilt3D MaxTilt="5">…</VetoTilt3D>
<VetoTilt3D MaxTilt="25" Perspective="600px">…</VetoTilt3D>

Glare

A highlight that follows the pointer, like light moving across something glossy. It is drawn over the content and ignores pointer events, so nothing underneath stops working.

Veto Components for Blazor
razor
<VetoTilt3D Glare="true" MaxTilt="16" Scale="1.04">
    <VetoCard Elevation="VetoElevation.Raised">…</VetoCard>
</VetoTilt3D>

Settling

Reset returns the surface to flat when the pointer leaves. Turn it off and it holds the last angle, which suits a surface the pointer keeps coming back to.

Slow settle

900ms

Holds its angle

Reset off

Disabled

No effect
razor
<VetoTilt3D ResetDuration="900">…</VetoTilt3D>
<VetoTilt3D Reset="false">…</VetoTilt3D>
<VetoTilt3D Disabled="true">…</VetoTilt3D>

Direction, axis and live changes

Reverse makes the surface lean towards the pointer, as if pulled. Axis limits the tilt to left-right or up-down. Every parameter can change while the tilt is live - the next pointer move uses the new values.

Reverse

Leans towards you

Horizontal

Left-right only

Live

MaxTilt 4
razor
<VetoTilt3D Reverse="true">…</VetoTilt3D>
<VetoTilt3D Axis="VetoTiltAxis.Horizontal">…</VetoTilt3D>
<VetoTilt3D MaxTilt="_tilt">…</VetoTilt3D>   @* changes apply live *@

When it does nothing

The effect never attaches for a visitor who has asked for reduced motion, or for a coarse pointer - a finger has no hover position for the surface to follow, and a tilt that only fires on tap reads as a glitch. In both cases the content renders exactly as it would otherwise; only the movement is gone.

The pointer is tracked in JavaScript, which writes two custom properties that the CSS transform reads. Nothing crosses into .NET while the pointer moves - a per-frame interop call would cost frames in WebAssembly, and a great deal more over a Server circuit.

Parameters

Parameter Type Default Description
MaxTilt double 12 Tilt at the edges, in degrees.
Perspective string "1000px" Depth of the perspective. Shorter exaggerates the effect.
Scale double 1.02 How much the surface grows while hovered. 1 leaves it unscaled.
Glare bool false Adds a highlight that follows the pointer.
Reset bool true Returns the surface to flat when the pointer leaves.
ResetDuration int 400 How long the settle takes, in milliseconds.
Reverse bool false Lean towards the pointer instead of away from it.
Axis VetoTiltAxis Both Both, Horizontal (left-right only) or Vertical (up-down only).
Disabled bool false Turns the effect off without changing the content or layout.
Something went wrong. Reload 🗙