Framer Text Wrapper

TextWrapper.tsx

// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/

import { addPropertyControls, ControlType } from "framer"
import { ScrambleText } from "./ScrambleText.tsx"

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/docs/guides/auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */
export default function TextWrapper(props) {
    // This is a React component containing an Example component
    // - Replace <Example /> with your own code
    // - Find inspiration: https://www.framer.com/developers/

    return (
        <div
            style={{
                ...containerStyle,
                fontSize: props.size,
                color: props.color,
            }}
        >
            <ScrambleText size={10}>{props.text}</ScrambleText>
        </div>
    )
}

addPropertyControls(TextWrapper, {
    text: {
        type: ControlType.String,

        title: "Text",
        defaultValue: "Lorem Ipsum dolor si amet",
    },
    size: {
        title: "text size",
        type: ControlType.Number,
        defaultValue: 22,
    },
    color: {
        title: "text color",
        type: ControlType.Color,
        defaultValue: "#000",
    },
})

// Styles are written in object syntax
// Learn more: https://reactjs.org/docs/dom-elements.html#style
const containerStyle = {
    height: "100%",
    display: "flex",

    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}