Layout Element Alignment

Python Code

from dataclasses import replace

from vood.components import TextRenderer, TextState
from vood.converter.converter_type import ConverterType
from vood import layouts
from vood.transitions.easing import easing
from vood.tat.logger import configure_logging
from vood.velements import VElement
from vood.velements.velement_group import VElementGroup, VElementGroupState
from vood.vscene import VScene
from vood.vscene.vscene_exporter import VSceneExporter

configure_logging(level="INFO")

START_COLOR = "#FDBE02"
END_COLOR = "#AA0000"


def main():

    # Create the scene
    scene = VScene(width=256, height=256, background="#000017")

    # Create text states for each number with consistent styling
    states = [
        TextState(
            text=str(num),
            font_family="Courier",
            font_size=20,
        )
        for num in range(1, 10)
    ]

    x_shifts = [-100, 60]

    all_states = [
        layouts.line(states, center_x=x_shift, spacing=20, rotation=90)
        for x_shift in x_shifts
    ]

    # Create a text renderer for all numbers
    renderer = TextRenderer()

    # overriding the default easing for the x property for each element
    elements = [
        VElement(
            renderer=renderer,
            states=states,
            easing={"x": easing.linear},
            global_transitions={"color": (START_COLOR, END_COLOR)},
        )
        for states in zip(*all_states)
    ]

    g_start_state = VElementGroupState()

    g1_end_state = VElementGroupState(rotation=75, transform_origin_x=x_shifts[1] / 2)
    g2_end_state = VElementGroupState(rotation=-75, transform_origin_x=x_shifts[1] / 2)

    g1 = VElementGroup(
        elements=elements[:4],
        keyframes=[
            (0, g_start_state),
            (0.5, g_start_state),
            (1, g1_end_state),
        ],
    )
    g2 = VElementGroup(
        elements=elements[5:],
        keyframes=[
            (0, g_start_state),
            (0.5, g_start_state),
            (1, g2_end_state),
        ],
    )
    scene.add_elements([g1, g2])

    # adding the middle element as it is not part of any group
    scene.add_element(elements[4])

    # Create the exporter
    exporter = VSceneExporter(
        scene=scene,
        converter=ConverterType.PLAYWRIGHT,
        output_dir="output/",
    )

    # Export to MP4 file
    exporter.to_mp4(
        filename="group_dynamics",
        total_frames=90,
        framerate=30,
        width_px=512,
    )


if __name__ == "__main__":
    main()

Remarks

Elements can be rotated within layouts using the alignment argument:

• ElementAlignment.UPRIGHT – elements remain upright regardless of position.
• ElementAlignment.LAYOUT – elements rotate to flow naturally with the layout (varies by layout type).
• ElementAlignment.PRESERVE – element's original rotation stays unchanged.

Fine-tune individual element rotation:

• element_rotation_offset – Fixed angle (in degrees) added to the rotation
• element_rotation_offset_fn – Custom function to calculate offset (overrides element_rotation_offset if provided)

Vision

State transitions are at the core of Vood's animation design. Layouts in Vood are implemented as pure functions that take a State as input and return a modified State as output.

Our vision is for the Vood community to build a rich, collaborative library of these state-altering functions. Because layouts are pure functions, they can be easily shared, composed, and chained together to create sophisticated animations from simple, reusable building blocks.