Tilt Parallax Card

Added in version 2.0.1.

A 3D parallax card widget with dynamic layer displacement for pop-out effects.

Features

• Layered 3D Parallax Effect: Separates the visual components into distinct

  3D Z-layers using RenderContext and dynamic matrix transformations based on cursor movement.

• Pop-Out Visual Depth: Allows foreground elements (characters, objects,

  or key visual assets) to break past the card’s physical boundary using configurable scale (foreground_scale) and depth offsets (foreground_z_offset).

Anatomy

Base example

Imperative Python styleDeclarative Python style

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen


KV = '''
<MyScreen>
    md_bg_color: "#061420"

    TiltParallaxCard:
        card_size: dp(220), dp(320)
        foreground_scale: 0.85
        foreground_z_offset: dp(35)
        text_z_offset: dp(50)
        corner_radius: dp(24)
        pos_hint: {"center_x": .5, "center_y": .5}
        max_tilt_angle: 45

        TiltBackgroundImage:
            source: "background.png"

        TiltForegroundImage:
            source: "foreground.png"

        TiltTextContainer:
            spacing: dp(4)

            MDLabel:
                text: "IbaneZ"
                font_style: "Display"
                theme_line_height: "Custom"
                line_height: dp(0.5)
                role: "medium"
                bold: True
                adaptive_height: True
                theme_text_color: "Custom"
                text_color: "#F2DCB6"

            MDLabel:
                text:
                    "• Body: Mahogany/Poplar\n"                                 "• Neck: 3-pc Maple\n"                                 "• Fretboard: Rosewood\n"                                 "• Pickups: H-S-H Configuration\n"                                 "• Frets: 24 Jumbo"
                bold: True
                font_style: "Label"
                role: "small"
                adaptive_height: True
                theme_text_color: "Custom"
                text_color: "white"
'''


class MyScreen(MDScreen):
    ...


class ParallaxTest(MDApp):
    def build(self):
        Builder.load_string(KV)
        return MyScreen()


ParallaxTest().run()

“

“• Neck: 3-pc Maple

“

“• Fretboard: Rosewood

“

“• Pickups: H-S-H Configuration

“

“• Frets: 24 Jumbo”

), font_style=”Label”, role=”small”, bold=True, adaptive_height=True, theme_text_color=”Custom”, text_color=”white”,

), spacing=”4dp”,

), card_size=(dp(220), dp(320)), foreground_scale=0.85, foreground_z_offset=”35dp”, text_z_offset=”50dp”, corner_radius=”24dp”, pos_hint={“center_x”: 0.5, “center_y”: 0.5}, max_tilt_angle=45,

)

]

class ParallaxTest(MDApp):

def build(self):

return MyScreen()

ParallaxTest().run()

API - kivymd.uix.tilt.tildparalaxcard

class kivymd.uix.tilt.tildparalaxcard.TiltBackgroundImage(**kwargs)

Background layer widget for TiltParallaxCard.

For more information, see in the AsyncImage class documentation.

class kivymd.uix.tilt.tildparalaxcard.TiltForegroundImage(**kwargs)

Foreground (pop-out) layer widget for TiltParallaxCard.

For more information, see in the AsyncImage class documentation.

class kivymd.uix.tilt.tildparalaxcard.TiltParallaxCard(*args, **kwargs)

3D Parallax Card widget with dynamic 3D depth pop-out effect. Renders background, foreground, and content in separated 3D Z-layers to create a dynamic parallax effect on mouse movement.

For more information, see in the DeclarativeBehavior and TiltBehavior and Widget classes documentation.

background_source

URL or path to the background image.

background_source is a StringProperty and defaults to ‘’.

foreground_source

URL or path to the foreground (character or pop-out object) image.

foreground_source is a StringProperty and defaults to ‘’.

foreground_scale

Scale multiplier for the foreground image relative to card dimensions.

TiltParallaxCard(
    foreground_scale=1.25,
)

TiltParallaxCard(
    foreground_scale=0.5,
)

foreground_scale is a NumericProperty and defaults to 1.25.

foreground_z_offset

Z-axis depth displacement for the foreground layer in 3D space.

TiltParallaxCard(
    foreground_z_offset=35,
)

TiltParallaxCard(
    foreground_z_offset=10,
)

foreground_z_offset is a NumericProperty and defaults to dp(35).

parallax_x_offset

Maximum horizontal displacement offset applied to foreground on mouse tilt.

TiltParallaxCard(
    parallax_x_offset=dp(200),
)

TiltParallaxCard(
    parallax_x_offset=dp(40),
)

parallax_x_offset is a NumericProperty and defaults to dp(40).

parallax_y_offset

Maximum vertical displacement offset applied to foreground on mouse tilt.

parallax_y_offset is a NumericProperty and defaults to dp(40).

text_z_offset

Z-axis depth displacement for the text container layer.

text_z_offset is a NumericProperty and defaults to dp(50).

container_pos

Position tuple (x, y) for placing the text container relative to bottom-left corner.

container_pos is a ListProperty and defaults to [dp(15), dp(15)].

add_widget(widget, *args, **kwargs)

Add a new widget as a child of this widget.

Parameters:

widget: Widget

Widget to add to our list of children.

index: int, defaults to 0

Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.

Added in version 1.0.5.

canvas: str, defaults to None

Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.

Added in version 1.9.0.

>>> from kivy.uix.button import Button
>>> from kivy.uix.slider import Slider
>>> root = Widget()
>>> root.add_widget(Button())
>>> slider = Slider()
>>> root.add_widget(slider)