Tilt

Added in version 2.0.1.

The TiltBehavior class adds an interactive 3D perspective tilt effect, content parallax shift, and a dynamic gradient glare to Kivy and KivyMD widgets based on cursor movement or touch interaction.

Features

• 3D Perspective Tilt: Smoothly rotates the widget along the X and Y axes depending on the cursor’s relative position from the center.

• Dynamic Glare Effect: Generates a real-time lighting glare that tracks mouse movement across the widget surface with adjustable radius and opacity.

• Parallax Shift: Shifts inner textures or content slightly to create a multi-layered depth illusion.

• Smooth Animation: Utilizes linear interpolation (LERP) inside a 60 FPS clock cycle to ensure fluid, lag-free transitions.

Base example

Imperative Python styleDeclarative Python style

from kivy.lang import Builder
from kivy.uix.widget import Widget

from kivymd.app import MDApp
from kivymd.uix.behaviors import TiltBehavior


class TiltCard(TiltBehavior, Widget):
    ...


KV = '''
<TiltCard>
    canvas:
        Color:
            rgba: 1, 0, 0, 1
        Rectangle:
            size: self.card_size
            pos: -self.card_size[0] / 2, -self.card_size[1] / 2


MDScreen:
    md_bg_color: self.theme_cls.backgroundColor

    TiltCard:
        size_hint: None, None
        size: dp(200), dp(350)
        card_size: self.size
        pos_hint: {"center_x": .5, "center_y": .5}
        corner_radius: dp(24)
'''


class TiltExample(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"

        return Builder.load_string(KV)


TiltExample().run()

Note

See also kivymd.uix.tilt.TiltCard

API - kivymd.uix.behaviors.tilt_behavior

class kivymd.uix.behaviors.tilt_behavior.TiltBehavior(**kwargs)

A behavior class that adds an interactive 3D tilt effect, parallax, and glare to a Kivy/KivyMD widget based on mouse/touch movement.

This class should be inherited alongside a Kivy/KivyMD Widget or its subclasses. It uses a custom RenderContext with custom GLSL shaders to perform 3D transformations directly on the GPU.

card_size

Dimensions of the 3D card/widget plane.

card_size is an ListProperty and defaults to [dp(100), dp(100)].

fov

Field of View (FOV) for the 3D perspective camera.

fov is an NumericProperty and defaults to 45.0.

max_tilt_angle

Maximum tilt angle in degrees when hovering over the edges.

TiltCard(
    max_tilt_angle=360,
)

TiltCard(
    max_tilt_angle=45,
)

max_tilt_angle is an NumericProperty and defaults to 45.0.

smoothness

Interpolation factor for smooth animations (lower is slower/smoother).

smoothness is an NumericProperty and defaults to 0.06.

parallax_strength

Multiplier for the texture/content parallax shift.

parallax_strength is an NumericProperty and defaults to 0.05.

text_z_offset

Z-axis offset for child widgets (e.g., text) to make them pop out.

TiltCard(
    text_z_offset=25,
)

TiltCard(
    text_z_offset=0,
)

text_z_offset is an NumericProperty and defaults to 25.0.

corner_radius

Border radius to clip the shader rendering.

corner_radius is an NumericProperty and defaults to 0.

glare_radius

Size of the gradient glare effect.

TiltCard(
    glare_radius=1,
)

TiltCard(
    glare_radius=0.6,
)

glare_radius is an NumericProperty and defaults to 0.6.

glare_max_opacity

Opacity of the gradient glare effect.

glare_max_opacity is an NumericProperty and defaults to 0.35.

glare_color

Color of the glare effect.

glare_color is an ColorProperty and defaults to [1.0, 1.0, 1.0, 1.0].

flip_angle

Initial or programmatic rotation around the Y-axis (for card flips).

flip_angle is an NumericProperty and defaults to 0.0.

static_tilt

Determines whether the widget uses a fixed static tilt angle instead of responding dynamically to cursor or touch movement.

static_tilt is an BooleanProperty and defaults to False.

tilt_angle_x

Fixed rotation angle in degrees around the X-axis when static_tilt is set to True.

tilt_angle_x is an NumericProperty and defaults to 0.

tilt_angle_y

Fixed rotation angle in degrees around the Y-axis when static_tilt is set to True.

tilt_angle_y is an NumericProperty and defaults to 0.

update_matrices(*args)

Updates the 3D projection matrix. This is called whenever the window is resized or the widget changes its dimensions/position.

on_parent(widget, parent)

on_mouse_move(window, pos)

Tracks the mouse position and calculates target rotation, glare position, and parallax offset if the mouse is over the widget.

update_transform(dt)

Called every frame. Smoothly interpolates the current values towards the target values and passes them as uniforms to the shaders.