SOEOPSFY24-311 | build horizontal lineart animation

app/components/images/horizontal-lineart.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { cnb } from "cnbuilder";
+import { motion } from "framer-motion";
+
+interface HorizontalLineartProps {
+  className?: string;
+}
+
+export const HorizontalLineart = ({
+  className,
+  ...props
+}: HorizontalLineartProps) => {
+  return (
+    <div {...props} className={cnb("flex justify-end rs-py-3", className)}>
+      <motion.svg
+        width="1538"
+        height="82"
+        viewBox="0 0 1538 82"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <motion.path
+          d="M2520 43.0024C2308.67 43.0024 1226.8 43.0025 1190 43.0025C1153.2 43.0025 1151.5 80.0025 1190 80.0025C1248 80.0025 1151 80.0025 1230.5 80.0025C1310 80.0025 1309 2.00248 1230.5 2.00249C1169.7 2.00249 208.5 2.00016 0.5 2.00018"
+          stroke="#F83535"
+          strokeWidth="4"
+          initial={{ pathLength: 1, pathOffset: 1 }}
+          animate={{ pathLength: 1, pathOffset: 0 }}
+          transition={{
+            duration: 3,
+            ease: "easeInOut",
+          }}
+        />
+      </motion.svg>
+    </div>
+  );
+};

app/example/page.tsx

@@ -10,6 +10,7 @@ import TimelineEven from "@/components/TimelineEven/TimelineOverview";
 import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
 import { Container } from "@/components/Container";
 import { AlumniBanner } from "@/components/AlumniBanner";
+import { HorizontalLineart } from "@/components/images/horizontal-lineart";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -50,6 +51,7 @@ const ExamplePage = async () => {
         </Text>
       </FeatureHero>
       <ShapeAnimation />
+      <HorizontalLineart className="rs-pl-10" />
       <PageTitle heading="100 years of" bigText="Impact" />
       <Container width="site" py={9} className="font-dm-sans">
         <MediaCaptionImage