diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 0c0c2f6e..4958c1d6 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -37,3 +37,23 @@ body.items-show
   .nc-icon
     height: 16px
     width: 16px
+
+  outfit-viewer
+    position: relative
+    display: block
+    width: 300px
+    height: 300px
+    border: 1px solid $module-border-color
+    border-radius: 1em
+    overflow: hidden
+
+    margin: 0 auto .75em
+
+    outfit-layer
+      display: block
+      position: absolute
+      inset: 0
+
+      img
+        width: 100%
+        height: 100%
diff --git a/app/controllers/items_controller.rb b/app/controllers/items_controller.rb
index e086c031..cc75d736 100644
--- a/app/controllers/items_controller.rb
+++ b/app/controllers/items_controller.rb
@@ -82,6 +82,16 @@ class ItemsController < ApplicationController
             group_by_owned
           @current_user_quantities = current_user.item_quantities_for(@item)
         end
+
+        @preview_pet_type = PetType.find_by_color_id_and_species_id(
+          Color.find_by_name("Blue"),
+          Species.find_by_name("Acara"),
+        )
+        @item_layers = @item.appearance_for(
+          @preview_pet_type, swf_asset_includes: [:zone]
+        ).swf_assets
+        @pet_layers = @preview_pet_type.canonical_pet_state.swf_assets.
+          includes(:zone)
       end
 
       format.gif do
diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb
index 31f0bfde..7a4021b7 100644
--- a/app/helpers/items_helper.rb
+++ b/app/helpers/items_helper.rb
@@ -244,5 +244,15 @@ module ItemsHelper
   def item_header_user_lists_form_state
     cookies.fetch("DTIItemPageUserListsFormState", "closed")
   end
+
+  def outfit_viewer_layers(swf_assets)
+    swf_assets.map { |a| outfit_viewer_layer(a) }.join("\n").html_safe
+  end
+
+  def outfit_viewer_layer(swf_asset)
+    content_tag "outfit-layer", style: "z-index: #{swf_asset.zone.depth}" do
+      image_tag swf_asset.image_url, alt: ""
+    end
+  end
 end
 
diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js
index 5d8d56b0..afc9235c 100644
--- a/app/javascript/item-page.js
+++ b/app/javascript/item-page.js
@@ -1,15 +1,2 @@
-import React from "react";
-import ReactDOM from "react-dom";
-
-import { AppProvider, ItemPageOutfitPreview } from "./wardrobe-2020";
-
-const rootNode = document.querySelector("#outfit-preview-root");
-const itemId = rootNode.getAttribute("data-item-id");
-// TODO: Use the new React 18 APIs instead!
-// eslint-disable-next-line react/no-deprecated
-ReactDOM.render(
-  <AppProvider>
-    <ItemPageOutfitPreview itemId={itemId} />
-  </AppProvider>,
-  rootNode,
-);
+// eslint-disable-next-line no-console
+console.log("OwO!");
diff --git a/app/models/item.rb b/app/models/item.rb
index e246be6f..5739e082 100644
--- a/app/models/item.rb
+++ b/app/models/item.rb
@@ -595,6 +595,10 @@ class Item < ApplicationRecord
     end
   end
 
+  def appearance_for(target, ...)
+    Item.appearances_for([id], target, ...)[id]
+  end
+
   # Given a list of item IDs, return how they look on the given target (either
   # a pet type or an alt style).
   def self.appearances_for(item_ids, target, swf_asset_includes: [])
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 84f3aeea..b4416fdd 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -13,7 +13,11 @@
     how we handle zones. Until then, these items will be <em>very</em> buggy,
     sorry!
 
-#outfit-preview-root{'data-item-id': @item.id}
+%outfit-viewer
+  %outfit-pet-appearance
+    = outfit_viewer_layers @pet_layers
+  %outfit-item-appearance
+    = outfit_viewer_layers @item_layers
 
 - unless @contributors_with_counts.empty?
   #item-contributors