29. Stack

No animation, just an example of how to create a <Stack> in code.

Code component

export function CC29Stack() {
    return (
        <Stack
            // Visual & layout
            size={150}
            radius={30}
            center
            // Stack
            direction="horizontal"
            overflow="hidden"
            distribution="space-between"
        >
            <Frame width={70} height={150} radius={10} backgroundColor="#fff" />
            <Frame width={70} height={150} radius={10} backgroundColor="#fff" />
        </Stack>
    )
}

Framer Motion

The Framer Motion library doesn’t have a stack, so I used a regular Flexbox.

export function FM29Flexbox() {
    return (
        <Center>
            <div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    overflow: "hidden",
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-between",
                }}
            >
                <div
                    style={{
                        width: 70,
                        height: 150,
                        borderRadius: 10,
                        backgroundColor: "#fff",
                    }}
                />
                <div
                    style={{
                        width: 70,
                        height: 150,
                        borderRadius: 10,
                        backgroundColor: "#fff",
                    }}
                />
            </div>
        </Center>
    )
}

(No animation, so just regular divs instead of motion divs.)

Override

No override needed.