Update film simulation samples

src/app/(static)/film/animate/page.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import InfoBlock from '@/components/InfoBlock';
+import { cc } from '@/utility/css';
+import { FILM_SIMULATION_FORM_INPUT_OPTIONS } from '@/vendors/fujifilm';
+import PhotoFujifilmSimulation from
+  '@/vendors/fujifilm/PhotoFujifilmSimulation';
+import { useEffect, useState } from 'react';
+
+export default function FilmPage() {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((index + 1) % FILM_SIMULATION_FORM_INPUT_OPTIONS.length);
+    }, 200);
+    return () => clearInterval(interval);
+  });
+
+  return (
+    <InfoBlock className="w-[250px] h-[125px] m-36 scale-150">
+      <div className={cc(
+        'w-[250px] h-[125px]',
+        'flex justify-start items-center pl-12',
+      )}>
+        <PhotoFujifilmSimulation
+          simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
+          showIconFirst
+        />
+      </div>
+    </InfoBlock>
+  );
+}

src/app/(static)/film/page.tsx

@@ -4,10 +4,13 @@ import PhotoFujifilmSimulation from
 
 export default function FilmPage() {
   return (
-    <div className="space-y-1">
+    <div className="space-y-1 my-12">
       {FILM_SIMULATION_FORM_INPUT_OPTIONS.map(({ value }) =>
         <div key={value}>
-          <PhotoFujifilmSimulation simulation={value} />
+          <PhotoFujifilmSimulation
+            simulation={value}
+            showIconFirst
+          />
         </div>)}
     </div>
   );

src/vendors/fujifilm/PhotoFujifilmSimulation.tsx

@@ -8,8 +8,10 @@ import PhotoFujifilmSimulationIcon from './PhotoFujifilmSimulationIcon';
 
 export default function PhotoFujifilmSimulation({
   simulation,
+  showIconFirst,
 }: {
-  simulation: FujifilmSimulation;
+  simulation: FujifilmSimulation
+  showIconFirst?: boolean
 }) {
   const { small, medium, large } = getLabelForFilmSimulation(simulation);
   return (
@@ -32,7 +34,10 @@ export default function PhotoFujifilmSimulation({
       )}>
         {medium}
       </span>
-      <span className="translate-y-[-1.25px] text-extra-dim">
+      <span className={cc(
+        'translate-y-[-1.25px] text-extra-dim',
+        showIconFirst && 'order-first',
+      )}>
         <PhotoFujifilmSimulationIcon simulation={simulation} />
       </span>
     </span>