Syntax

import type { ComponentType } from "react"

export function setRotate(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: 360 }}
                transition={{ duration: 1, ease: "linear" }}
            />
        )
    }
}

<h1
            ref={ref}
            style={{
                color,
                fontSize: isCanvas ? clampedSizeOnCanvas : clampedSize,
                fontFamily: `"${fontFamily}", sans-serif`,
                fontStyle,
                fontWeight,
                textAlign,
                letterSpacing: `${letterSpacing / 100}em`,
                lineHeight: isCanvas
                    ? `${clampedSizeOnCanvas * lineHeight}px`
                    : lineHeight,
                whiteSpace: "nowrap",
                margin: 0,
                padding: 0,
                position: "relative",
                left: `${offset}%`,
            }}
        >
            {textContent}
        </h1>

import { useLayoutEffect, useRef, useState } from "react"
import { addPropertyControls, ControlType, RenderTarget } from "framer"

/**
 * HEADING
 *
 * @framerIntrinsicWidth 260
 * @framerIntrinsicHeight 200
 * @framerDisableUnlink
 *
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerSupportedLayoutHeight any
 */
export default function Heading(props) {
    const { textContent, minFontSize, maxFontSize, scaler, offset, font } =
        props

    const {
        color,
        fontFamily,
        fontWeight,
        fontStyle,
        textAlign,
        letterSpacing,
        lineHeight,
    } = font

    const isCanvas = RenderTarget.current() === RenderTarget.canvas
    const clampedSize = `clamp(${minFontSize}px, ${scaler}vw, ${maxFontSize}px)`

    /* Get width for canvas previewing */
    const [width, setWidth] = useState(0)
    const ref = useRef(null)
    const clampedSizeOnCanvas = clamp(
        width * (scaler / 100),
        minFontSize,
        maxFontSize
    )

    /* Grab the width on prop changes */
    if (isCanvas) {
        useLayoutEffect(() => {
            setWidth(ref.current.offsetWidth)
        })
    }

    return (
        <h1
            ref={ref}
            style={{
                color,
                fontSize: isCanvas ? clampedSizeOnCanvas : clampedSize,
                fontFamily: `"${fontFamily}", sans-serif`,
                fontStyle,
                fontWeight,
                textAlign,
                letterSpacing: `${letterSpacing / 100}em`,
                lineHeight: isCanvas
                    ? `${clampedSizeOnCanvas * lineHeight}px`
                    : lineHeight,
                whiteSpace: "nowrap",
                margin: 0,
                padding: 0,
                position: "relative",
                left: `${offset}%`,
            }}
        >
            {textContent}
        </h1>
    )
}

/* Default Properties */
Heading.defaultProps = {
    textContent: "Hello",
}

Heading.displayName = "Heading"

/* Property Controls */
addPropertyControls(Heading, {
    textContent: {
        type: ControlType.String,
        title: "Text",
        defaultValue: "Hello",
    },
    scaler: {
        type: ControlType.Number,
        title: "Scaler",
        min: 0,
        max: 100,
        displayStepper: true,
        step: 1,
        unit: "vw",
        defaultValue: 20,
    },
    minFontSize: {
        type: ControlType.Number,
        title: "Min Size",
        min: 0,
        displayStepper: true,
        step: 1,
        unit: "px",
        defaultValue: 100,
    },
    maxFontSize: {
        type: ControlType.Number,
        title: "Max Size",
        min: 0,
        displayStepper: true,
        step: 1,
        unit: "px",
        defaultValue: 600,
    },
    offset: {
        type: ControlType.Number,
        title: "Offset",
        min: -100,
        max: 100,
        displayStepper: true,
        step: 0.25,
        defaultValue: 0,
        unit: "%",
    },
    font: {
        type: ControlType.Object,
        controls: {
            color: { type: ControlType.Color, defaultValue: "#888" },
            fontFamily: {
                type: ControlType.String,
                title: "Font",
                defaultValue: "Inter",
            },
            fontWeight: {
                type: ControlType.Enum,
                title: "Weight",
                options: [100, 200, 300, 400, 500, 600, 700, 800, 900],
                defaultValue: 400,
            },
            fontStyle: {
                type: ControlType.Enum,
                title: "Style",
                options: ["normal", "italic", "oblique"],
                optionTitles: ["Normal", "Italic", "Oblique"],
                defaultValue: "normal",
            },
            textAlign: {
                type: ControlType.Enum,
                displaySegmentedControl: true,
                title: "Align",
                // segmentedControlDirection: "vertical",
                options: ["left", "center", "right"],
                optionTitles: ["Left", "Center", "Right"],
                defaultValue: "center",
            },
            letterSpacing: {
                type: ControlType.Number,
                title: "Letter",
                min: -100,
                max: 100,
                displayStepper: true,
                step: 1,
                defaultValue: -5,
                unit: "%",
            },
            lineHeight: {
                type: ControlType.Number,
                title: "Line",
                min: -100,
                max: 100,
                displayStepper: true,
                step: 0.1,
                defaultValue: 1,
            },
        },
    },
})

/* Manual clamping for canvas */
const clamp = (num, min, max) => Math.min(Math.max(num, min), max)

<html>
  <body class="test" style="margin:0">
    <script type="module">const koen = 39; const ben = "yes"; const la = false;</script>
  </body>
</html>

<motion.div initial={false} animate={{ opacity: 0, bla: "hi", repeat: false }} />

@font-face {
  font-family: Inter;
  src: url("Inter.woff2");
}

body,
.text {
  color: #fff;
  background: #000;
  font-family: Inter;
  --heading: 24px/32px Helvetica, sans-serif;
}

@media print {
  a[href^="http"]::after {
    content: attr(href);
  }
}

// Overrides
export function withRotate(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: 360 }}
                transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
            />
        )
    }
}

// Overrides
export function withRotate(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                animate={{ rotate: 360 }}
                transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
            />
        )
    }
}

<motion.div
  layout
  animate={{ opacity: 0.5 }}
  transition={{
    opacity: { ease: "linear" },
    layout: { duration: 0.3 }
  }}
/>

## My Title

Welcome to my [site](ben.com) I really like to _style_ my **text**. 
He said: "Will you come with me?"...

public class Foo : IBar<int> {
    public string Baz { get; set; } = "foo";
}

import Foundation

@objc class Person: Entity {
  var name: String!
  var age:  Int!

  init(name: String, age: Int) {
  }
}

[
  {
    "title": "apples",
    "count": [12000, 20000]
  },
  {
    "title": "oranges",
    "count": [17500, null]
  }
]

<!DOCTYPE html>
<title>Title</title>

<style>
  body,
  .header {
    width: 500px;
    background: url(bg.jpg);
  }
</style>