diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx
new file mode 100644
index 00000000..4e2f1f89
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/src/app/(static)/film/page.tsx b/src/app/(static)/film/page.tsx
index c9ca28cc..31ac78de 100644
--- a/src/app/(static)/film/page.tsx
+++ b/src/app/(static)/film/page.tsx
@@ -4,10 +4,13 @@ import PhotoFujifilmSimulation from
export default function FilmPage() {
return (
-
+
{FILM_SIMULATION_FORM_INPUT_OPTIONS.map(({ value }) =>
)}
);
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 8c7c78fa..8f12a517 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/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}
-
+