diff --git a/Content.Client/Chemistry/Visualizers/FoamVisualizer.cs b/Content.Client/Chemistry/Visualizers/FoamVisualizer.cs
deleted file mode 100644
index 37fce4e9c4..0000000000
--- a/Content.Client/Chemistry/Visualizers/FoamVisualizer.cs
+++ /dev/null
@@ -1,68 +0,0 @@
-using System;
-using Content.Shared.Foam;
-using JetBrains.Annotations;
-using Robust.Client.Animations;
-using Robust.Client.GameObjects;
-using Robust.Shared.GameObjects;
-using Robust.Shared.IoC;
-using Robust.Shared.Maths;
-using Robust.Shared.Serialization;
-using Robust.Shared.Serialization.Manager.Attributes;
-
-namespace Content.Client.Chemistry.Visualizers
-{
-    [UsedImplicitly]
-    public sealed class FoamVisualizer : AppearanceVisualizer, ISerializationHooks
-    {
-        private const string AnimationKey = "foamdissolve_animation";
-
-        [DataField("animationTime")]
-        private float _delay = 0.6f;
-
-        [DataField("animationState")]
-        private string _state = "foam-dissolve";
-
-        private Animation _foamDissolve = new();
-
-        void ISerializationHooks.AfterDeserialization()
-        {
-            _foamDissolve = new Animation {Length = TimeSpan.FromSeconds(_delay)};
-            var flick = new AnimationTrackSpriteFlick();
-            _foamDissolve.AnimationTracks.Add(flick);
-            flick.LayerKey = FoamVisualLayers.Base;
-            flick.KeyFrames.Add(new AnimationTrackSpriteFlick.KeyFrame(_state, 0f));
-        }
-
-        [Obsolete("Subscribe to AppearanceChangeEvent instead.")]
-        public override void OnChangeData(AppearanceComponent component)
-        {
-            base.OnChangeData(component);
-
-            var entities = IoCManager.Resolve<IEntityManager>();
-            if (component.TryGetData<bool>(FoamVisuals.State, out var state))
-            {
-                if (state)
-                {
-                    if (entities.TryGetComponent(component.Owner, out AnimationPlayerComponent? animPlayer))
-                    {
-                        if (!animPlayer.HasRunningAnimation(AnimationKey))
-                            animPlayer.Play(_foamDissolve, AnimationKey);
-                    }
-                }
-            }
-
-            if (component.TryGetData<Color>(FoamVisuals.Color, out var color))
-            {
-                if (entities.TryGetComponent(component.Owner, out SpriteComponent? sprite))
-                {
-                    sprite.Color = color;
-                }
-            }
-        }
-    }
-
-    public enum FoamVisualLayers : byte
-    {
-        Base
-    }
-}
diff --git a/Content.Client/Chemistry/Visualizers/FoamVisualizerSystem.cs b/Content.Client/Chemistry/Visualizers/FoamVisualizerSystem.cs
new file mode 100644
index 0000000000..e5a2f5b689
--- /dev/null
+++ b/Content.Client/Chemistry/Visualizers/FoamVisualizerSystem.cs
@@ -0,0 +1,63 @@
+using Content.Shared.Foam;
+using Robust.Client.Animations;
+using Robust.Client.GameObjects;
+
+namespace Content.Client.Chemistry.Visualizers;
+
+/// <summary>
+/// The system responsible for ensuring <see cref="FoamVisualsComponent"/> plays the animation it's meant to when the foam dissolves.
+/// </summary>
+public sealed class FoamVisualizerSystem : VisualizerSystem<FoamVisualsComponent>
+{
+    public override void Initialize()
+    {
+        base.Initialize();
+        SubscribeLocalEvent<FoamVisualsComponent, ComponentInit>(OnComponentInit);
+    }
+
+    /// <summary>
+    /// Generates the animation used by foam visuals when the foam dissolves.
+    /// </summary>
+    private void OnComponentInit(EntityUid uid, FoamVisualsComponent comp, ComponentInit args)
+    {
+        comp.Animation = new Animation()
+        {
+            Length = TimeSpan.FromSeconds(comp.AnimationTime),
+            AnimationTracks =
+            {
+                new AnimationTrackSpriteFlick()
+                {
+                    LayerKey = FoamVisualLayers.Base,
+                    KeyFrames =
+                    {
+                        new AnimationTrackSpriteFlick.KeyFrame(comp.State, 0f)
+                    }
+                }
+            }
+        };
+    }
+
+    /// <summary>
+    /// Plays the animation used by foam visuals when the foam dissolves.
+    /// </summary>
+    protected override void OnAppearanceChange(EntityUid uid, FoamVisualsComponent comp, ref AppearanceChangeEvent args)
+    {
+        if (AppearanceSystem.TryGetData<bool>(uid, FoamVisuals.State, out var state, args.Component) && state)
+        {
+            if (TryComp(uid, out AnimationPlayerComponent? animPlayer)
+            && !AnimationSystem.HasRunningAnimation(uid, animPlayer, FoamVisualsComponent.AnimationKey))
+                AnimationSystem.Play(uid, animPlayer, comp.Animation, FoamVisualsComponent.AnimationKey);
+        }
+
+        if (AppearanceSystem.TryGetData<Color>(uid, FoamVisuals.Color, out var color, args.Component))
+        {
+            if (args.Sprite != null)
+                args.Sprite.Color = color;
+        }
+    }
+}
+
+public enum FoamVisualLayers : byte
+{
+    Base
+}
diff --git a/Content.Client/Chemistry/Visualizers/FoamVisualsComponent.cs b/Content.Client/Chemistry/Visualizers/FoamVisualsComponent.cs
new file mode 100644
index 0000000000..6dad697c72
--- /dev/null
+++ b/Content.Client/Chemistry/Visualizers/FoamVisualsComponent.cs
@@ -0,0 +1,36 @@
+using Robust.Client.Animations;
+
+namespace Content.Client.Chemistry.Visualizers;
+
+/// <summary>
+/// A component that makes foam play an animation when it dissolves.
+/// </summary>
+[RegisterComponent]
+[Access(typeof(FoamVisualizerSystem))]
+public sealed class FoamVisualsComponent : Component
+{
+    /// <summary>
+    /// The id of the animation used when the foam dissolves.
+    /// </summary>
+    public const string AnimationKey = "foamdissolve_animation";
+
+    /// <summary>
+    /// How long the foam visually dissolves for.
+    /// </summary>
+    [DataField("animationTime")]
+    public float AnimationTime = 0.6f;
+
+    /// <summary>
+    /// The state of the entities base sprite RSI that is displayed when the foam dissolves.
+    /// Cannot use <see cref="Robust.Graphics.RSI.StateKey"/> because it does not have <see cref="DataDefinitionAttribute"/> and I am not making an engine PR at this time.
+    /// </summary>
+    [DataField("animationState")]
+    public string State = "foam-dissolve";
+
+    /// <summary>
+    /// The animation used while the foam dissolves.
+    /// Generated by <see cref="FoamVisualizerSystem.OnComponentInit"/>.
+    /// </summary>
+    [ViewVariables(VVAccess.ReadOnly)]
+    public Animation Animation = default!;
+}
diff --git a/Resources/Prototypes/Entities/Effects/chemistry_effects.yml b/Resources/Prototypes/Entities/Effects/chemistry_effects.yml
index 458e297d4a..29671f4179 100644
--- a/Resources/Prototypes/Entities/Effects/chemistry_effects.yml
+++ b/Resources/Prototypes/Entities/Effects/chemistry_effects.yml
@@ -35,10 +35,9 @@
         map: ["enum.FoamVisualLayers.Base"]
   - type: AnimationPlayer
   - type: Appearance
-    visuals:
-      - type: FoamVisualizer
-        animationTime: 0.6
-        animationState: foam-dissolve
+  - type: FoamVisuals
+    animationTime: 0.6
+    animationState: foam-dissolve
   - type: Transform
     anchored: true
   - type: Physics
@@ -73,10 +72,9 @@
     - state: mfoam
       map: ["enum.FoamVisualLayers.Base"]
   - type: Appearance
-    visuals:
-    - type: FoamVisualizer
-      animationTime: 0.6
-      animationState: mfoam-dissolve
+  - type: FoamVisuals
+    animationTime: 0.6
+    animationState: mfoam-dissolve
   - type: FoamSolutionAreaEffect
     foamedMetalPrototype: FoamedIronMetal
 
@@ -92,10 +90,9 @@
       - state: mfoam
         map: ["enum.FoamVisualLayers.Base"]
   - type: Appearance
-    visuals:
-      - type: FoamVisualizer
-        animationTime: 0.6
-        animationState: mfoam-dissolve
+  - type: FoamVisuals
+    animationTime: 0.6
+    animationState: mfoam-dissolve
   - type: FoamSolutionAreaEffect
     foamedMetalPrototype: FoamedAluminiumMetal