0kzh

// from https://kelvinzhang.com/playground/scroll-area

import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
import styled from 'styled-components';

type ScrollAreaProps = {
  children: React.ReactNode;
  showOverflowIndicator?: boolean;
  hideScrollbar?: boolean;
  indicatorColor?: CSSProperties["background"];

0kzh

.fullWidthSection {
	/* Hack to make the section full viewport width */
	width: 100vw;
	margin-left: calc(
		-50vw + 50%
	); /* Adjusts the section to align left edge with the viewport */

	margin-right: calc(
		-50vw + 50%
	); /* Adjusts the section to align right edge with the viewport */

0kzh

import animationData from "./loading.json";
import { Player } from "@lottiefiles/react-lottie-player";

const App = () => {
  return (
    <div className="App">
      <Player
        autoplay
        loop
        src={animationData}

0kzh

import animationData from "./loading.json";
import placeholderImg from "./preview.png";
import { Player } from "@lottiefiles/react-lottie-player";

const App = () => {
  return (
    <div className="App">
      {!animationData ? (
        <img src={placeholderImg} alt="Loading placeholder" />
      ) : (