<ScrollAnimation className="p-8">
  <ScrollTranslateY className="h-dvh grid grid-cols-12 grid-rows-1">
    <ScrollScale
      className="col-start-2 col-end-12 row-start-1 row-end-2 flex flex-col justify-center items-center space-y-6 text-center"
      scaleRange={[1, 0]}
      inputRange={[0.1, 0.6]}
    >
      <h1 className="text-5xl font-bold tracking-tighter">
        Your Animated Hero
      </h1>
      <p className="mx-auto text-sm md:text-base">
        Yet another hero section, this time with scroll trigger animations,{' '}
        <br />
        animating the hero content with motion.
      </p>
      <div className="flex items-center justify-center gap-4">
        <Button>Get Started</Button>
        <Button variant="link">Learn more</Button>
      </div>
    </ScrollScale>
    <GridBento className="[&>*:first-child]:origin-[10%_0%] col-start-1 row-start-1 pointer-events-none row-end-2 col-end-13">
      {IMAGES.map((imageUrl, index) => (
        <ScrollScale
          key={index}
          inputRange={[0, 1]}
          scaleRange={[0.5, 1]}
          className="overflow-hidden"
        >
          <img
            className="size-full object-cover rounded-xl shadow-xl"
            src={imageUrl}
            alt="tokyo city"
          />
        </ScrollScale>
      ))}
    </GridBento>
  </ScrollTranslateY>
</ScrollAnimation>