https://app.spline.design/community → Animated Character

https://github.com/splinetool/react-spline?tab=readme-ov-file#read-and-modify-spline-objects

1. npm install @splinetool/react-spline

2. import

   import Spline from '@splinetool/react-spline';
   
   export default function App() {
     return (
       <Spline scene="<https://prod.spline.design/Q3VQCB2bq1JfEgrA/scene.splinecode>" />
     );
   }
   

<div className="max-w-1.5xl mx-auto pb-24 flex gap-8">
      <div className="flex-1 bg-slate-700">
        <Spline scene="<https://prod.spline.design/Q3VQCB2bq1JfEgrA/scene.splinecode>" />
      </div>
      <div className="flex-1 items-center justify-center bg-slate-700">
        <ReactTyped
          strings={["I'm a photographer and videographer who enjoys documenting people, places, and stories with a simple, honest approach. My work focuses on natural light, clean composition, and capturing moments as they unfold. Whether it's a portrait, an event, or a short film, I aim to create images and video that feel genuine and easy to connect with."]}
          typeSpeed={20}
          backSpeed={0}
          showCursor={true}
          loop={false} //only once
        />
      </div> 
</div>

import Spline from '@splinetool/react-spline'
import { ReactTyped } from 'react-typed'

export default function Narrative() {
  return (
    <div className="max-w-1xl px-30 mx-auto pb-24 flex gap-8">
      <div className="w-1/3 p-5">
         <Spline 
           scene="<https://prod.spline.design/Q3VQCB2bq1JfEgrA/scene.splinecode>"
           style={{ width: '150%', height: '100%' }}
         />
       </div>
       <div className="w-2/3 p-8 flex items-center text-2xl">
        <ReactTyped
          strings={["I'm a photographer and videographer who enjoys documenting people, places, and stories with a simple, honest approach. My work focuses on natural light, clean composition, and capturing moments as they unfold. Whether it's a portrait, an event, or a short film, I aim to create images and video that feel genuine and easy to connect with."]}
          typeSpeed={20}
          backSpeed={0}
          showCursor={true}
          loop={false} //only once
        />
      </div> 
    </div>
  )
}