Dimillian · rrgeorge · Oct 30, 2025
diff --git a/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift b/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift
@@ -215,6 +215,7 @@ struct DisplaySettingsView: View {
           Text(shape.description).tag(shape)
         }
       }
+      Toggle("settings.display.avatarAnimated", isOn: $theme.avatarAnimated)
       Toggle("settings.display.full-username", isOn: $theme.displayFullUsername)
       Picker("settings.display.status.action-buttons", selection: $theme.statusActionsDisplay) {
         ForEach(Theme.StatusActionsDisplay.allCases, id: \.rawValue) { buttonStyle in

diff --git a/IceCubesApp/Resources/Localization/Localizable.xcstrings b/IceCubesApp/Resources/Localization/Localizable.xcstrings
@@ -47636,6 +47636,17 @@
         }
       }
     },
+    "settings.display.avatarAnimated" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Animated Avatars and Headers"
+          }
+        }
+      }
+    },
     "settings.display.colors.apply" : {
       "extractionState" : "manual",
       "localizations" : {

diff --git a/Packages/Account/Package.swift b/Packages/Account/Package.swift
@@ -21,6 +21,7 @@ let package = Package(
     .package(name: "Models", path: "../Models"),
     .package(name: "StatusKit", path: "../StatusKit"),
     .package(name: "Env", path: "../Env"),
+    .package(name: "DesignSystem", path: "../DesignSystem"),
     .package(url: "https://github.com/Dean151/ButtonKit", from: "0.6.1"),
     .package(url: "https://github.com/dkk/WrappingHStack", from: "2.2.11"),
   ],
@@ -32,6 +33,7 @@ let package = Package(
         .product(name: "Models", package: "Models"),
         .product(name: "StatusKit", package: "StatusKit"),
         .product(name: "Env", package: "Env"),
+        .product(name: "DesignSystem", package: "DesignSystem"),
         .product(name: "ButtonKit", package: "ButtonKit"),
         .product(name: "WrappingHStack", package: "WrappingHStack"),
       ],

diff --git a/Packages/Account/Sources/Account/Detail/Components/AccountHeaderImageView.swift b/Packages/Account/Sources/Account/Detail/Components/AccountHeaderImageView.swift
@@ -3,6 +3,7 @@ import Env
 import Models
 import NukeUI
 import SwiftUI
+import DesignSystem
 
 struct AccountHeaderImageView: View {
   enum Constants {
@@ -40,17 +41,27 @@ struct AccountHeaderImageView: View {
           .accessibilityHidden(true)
       } else {
         LazyImage(url: account.header) { state in
-          if let image = state.image {
-            image
-              .resizable()
-              .aspectRatio(contentMode: .fill)
-              .overlay(account.haveHeader ? .black.opacity(0.50) : .clear)
-              .frame(height: Constants.headerHeight)
-              .clipped()
-          } else {
-            theme.secondaryBackgroundColor
-              .frame(height: Constants.headerHeight)
-          }
+            if let container = state.imageContainer {
+                if theme.avatarAnimated && container.type == .gif, let data = container.data {
+                    GifView(data:data)
+                        .aspectRatio(contentMode: .fill)
+                        .overlay(account.haveHeader ? .black.opacity(0.50) : .clear)
+                        .frame(height: Constants.headerHeight)
+                        .clipped()
+                } else {
+                    if let image = state.image {
+                        image
+                            .resizable()
+                            .aspectRatio(contentMode: .fill)
+                            .overlay(account.haveHeader ? .black.opacity(0.50) : .clear)
+                            .frame(height: Constants.headerHeight)
+                            .clipped()
+                    } else {
+                        theme.secondaryBackgroundColor
+                            .frame(height: Constants.headerHeight)
+                    }
+                }
+            }
         }
         .frame(height: Constants.headerHeight)
       }
@@ -99,4 +110,4 @@ struct AccountHeaderImageView: View {
         .padding(8)
     }
   }
-}
+}
diff --git a/Packages/DesignSystem/Package.swift b/Packages/DesignSystem/Package.swift
@@ -21,6 +21,7 @@ let package = Package(
     .package(name: "Env", path: "../Env"),
     .package(url: "https://github.com/kean/Nuke", exact: "12.8.0"),
     .package(url: "https://github.com/Dimillian/EmojiText", branch: "fix-ios26"),
+    .package(url: "https://github.com/kaishin/Gifu.git", from: "4.0.1"),
   ],
   targets: [
     .target(
@@ -31,6 +32,7 @@ let package = Package(
         .product(name: "NukeUI", package: "Nuke"),
         .product(name: "Nuke", package: "Nuke"),
         .product(name: "EmojiText", package: "EmojiText"),
+        .product(name: "Gifu", package: "Gifu"),
       ],
       swiftSettings: [
         .swiftLanguageMode(.v6)

diff --git a/Packages/DesignSystem/Sources/DesignSystem/Theme.swift b/Packages/DesignSystem/Sources/DesignSystem/Theme.swift
@@ -15,6 +15,7 @@ public final class Theme {
       case statusActionSecondary
       case contentGradient
       case compactLayoutPadding
+      case avatarAnimated
     }
 
     @AppStorage("is_previously_set") public var isThemePreviouslySet: Bool = false
@@ -42,7 +43,7 @@ public final class Theme {
     @AppStorage(ThemeKey.compactLayoutPadding.rawValue) public var compactLayoutPadding: Bool = true
     @AppStorage("font_size_scale") public var fontSizeScale: Double = 1
     @AppStorage("chosen_font") public var chosenFontData: Data?
-
+    @AppStorage(ThemeKey.avatarAnimated.rawValue) public var avatarAnimated: Bool = true
     init() {}
   }
 
@@ -301,6 +302,12 @@ public final class Theme {
       themeStorage.compactLayoutPadding = compactLayoutPadding
     }
   }
+
+  public var avatarAnimated: Bool {
+    didSet {
+      themeStorage.avatarAnimated = avatarAnimated
+    }
+  }
 
   public var selectedSet: ColorSetName = .iceCubeDark
 
@@ -342,6 +349,7 @@ public final class Theme {
     chosenFontData = themeStorage.chosenFontData
     statusActionSecondary = themeStorage.statusActionSecondary
     compactLayoutPadding = themeStorage.compactLayoutPadding
+    avatarAnimated = themeStorage.avatarAnimated
     selectedSet = storedSet
 
     computeContrastingTintColor()

diff --git a/Packages/DesignSystem/Sources/DesignSystem/Views/AccountPopoverView.swift b/Packages/DesignSystem/Sources/DesignSystem/Views/AccountPopoverView.swift
@@ -19,9 +19,16 @@ struct AccountPopoverView: View {
       LazyImage(
         request: ImageRequest(url: account.header)
       ) { state in
-        if let image = state.image {
-          image.resizable().scaledToFill()
-        }
+          if let container = state.imageContainer {
+              if container.type == .gif, let data = container.data {
+                  GifView(data:data)
+                      .scaledToFill()
+              } else {
+                  if let image = state.image {
+                      image.resizable().scaledToFill()
+                  }
+              }
+          }
       }
       .frame(width: 500, height: 150)
       .clipped()

diff --git a/Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift b/Packages/DesignSystem/Sources/DesignSystem/Views/AvatarView.swift
@@ -2,6 +2,7 @@ import Models
 import Nuke
 import NukeUI
 import SwiftUI
+import Env
 
 @MainActor
 public struct AvatarView: View {
@@ -117,6 +118,7 @@ struct AvatarImage: View {
 
   public let avatar: URL
   public let config: AvatarView.FrameConfig
+  @Environment(Theme.self) private var theme
 
   var body: some View {
     if reasons == .placeholder {
@@ -125,19 +127,32 @@ struct AvatarImage: View {
       LazyImage(
         request: ImageRequest(url: avatar, processors: [.resize(size: config.size)])
       ) { state in
-        if let image = state.image {
-          image
-            .resizable()
-            .scaledToFit()
-            .clipShape(RoundedRectangle(cornerRadius: config.cornerRadius))
-            .overlay(
-              RoundedRectangle(cornerRadius: config.cornerRadius)
-                .stroke(.primary.opacity(0.25), lineWidth: 1)
-            )
-        } else {
-          RoundedRectangle(cornerRadius: config.cornerRadius)
-            .stroke(.primary.opacity(0.25), lineWidth: 1)
-        }
+          if let container = state.imageContainer {
+              if theme.avatarAnimated && container.type == .gif, let data = container.data {
+                  GifView(data:data)
+                  .frame(width: config.width, height: config.height)
+                  .clipShape(RoundedRectangle(cornerRadius: config.cornerRadius))
+                  .overlay(
+                    RoundedRectangle(cornerRadius: config.cornerRadius)
+                        .stroke(.primary.opacity(0.25), lineWidth: 1)
+                  )
+              } else {
+                  if let image = state.image {
+                      image
+                          .resizable()
+                          .scaledToFit()
+                          .frame(width: config.width, height: config.height)
+                          .clipShape(RoundedRectangle(cornerRadius: config.cornerRadius))
+                          .overlay(
+                            RoundedRectangle(cornerRadius: config.cornerRadius)
+                                .stroke(.primary.opacity(0.25), lineWidth: 1)
+                          )
+                  } else {
+                      RoundedRectangle(cornerRadius: config.cornerRadius)
+                          .stroke(.primary.opacity(0.25), lineWidth: 1)
+                  }
+              }
+          }
       }
     }
   }

diff --git a/Packages/DesignSystem/Sources/DesignSystem/Views/GifView.swift b/Packages/DesignSystem/Sources/DesignSystem/Views/GifView.swift
@@ -0,0 +1,46 @@
+//
+//  GifView.swift
+//  DesignSystem
+//
+//  Created by Robert George on 10/26/25.
+//
+
+import SwiftUI
+import Gifu
+import Env
+
+public struct GifView: UIViewRepresentable {
+    let animatedView = GIFImageView()
+    var data : Data
+    @Environment(UserPreferences.self) private var preferences
+    @Environment(Theme.self) private var theme
+
+    public init(data: Data) {
+        self.data = data
+    }
+
+    public func makeUIView(context: UIViewRepresentableContext<GifView>) -> UIView {
+        let view = UIView()
+
+        animatedView.prepareForAnimation(withGIFData: data)
+
+        animatedView.translatesAutoresizingMaskIntoConstraints = false
+        view.addSubview(animatedView)
+
+        if theme.avatarAnimated {
+            animatedView.startAnimatingGIF()
+        }
+
+        NSLayoutConstraint.activate([
+            animatedView.heightAnchor.constraint(equalTo: view.heightAnchor),
+            animatedView.widthAnchor.constraint(equalTo: view.widthAnchor)
+        ])
+
+        return view
+    }
+
+    public func updateUIView(_ uiView: UIView, context: Context) {
+
+    }
+
+}