Function Scrollycoding

apps/web/content/blog/remotion/code.tsx:45–75

(props: unknown)

})

export function Scrollycoding(props: unknown) {
  const { steps } = parseProps(props, Schema)
  return (
    <SelectionProvider className="flex gap-4 -mx-8">
      <div className="flex-1 min-w-0 mb-[50vh]">
        {steps.map((step, i) => (
          <Selectable
            key={i}
            index={i}
            selectOn={["click", "scroll"]}
            className="opacity-50 data-[selected=true]:opacity-100 transition-opacity duration-300"
          >
            {step.children}
          </Selectable>
        ))}
      </div>
      <div className="flex-1 min-w-0">
        <div className="top-20 sticky">
          <Selection
            from={steps.map((step) => (
              <TheCode
                codeblock={step.code}
                className="my-0 max-h-[calc(100vh-6rem)] h-screen flex flex-col"
              />
            ))}
          />
        </div>
      </div>
    </SelectionProvider>
  )
}