Interactions / UI Components / Websites
ORZR — Interactive Clothing Rack Kit
Bring the feeling of browsing a clothing rack to the web. Drag through your collection, preview a garment around its hanger, and explore its details in an expandable gallery. Customize the images, colors, spacing and motion to fit your brand.
Reproduction tools
KKNOWLEDGE- Codex
- OpenAI ImageGen
BEHIND THE WORKORZR – Webの中に、実店舗のような発見と体験を。実店舗で服を選ぶときの偶然の発見や、手に取って確かめる感覚をWebへ。ORZRの制作背景と、商品との出会いを体験として設計する考え方を紹介します。Read the story Article in Japanese (opens in a new tab)
Muted
Complete Kit
The complete code package
Add the clothing rack from the demo to a React site. Swap the images and names, then adjust the colors and motion to suit your brand.
- Contents
- React component, styles, sample images and setup guide
- How to use
- Run the included demo, then replace the product data and images.
¥7,980Indicative price
Files in the ZIP
src/ClothingRack.tsxThe React clothing rack componentsrc/styles.cssRack and product detail stylesdemo/ · examples/next-app/Vite demo and Next.js exampleQUICK_START.mdInstallation and image replacement guide
Prompt Pack · Example contents
Instructions and reference images for AI
A file set of written instructions and reference images for the rack’s layout and movement. Send them together to an AI to build a similar rack.
- Example contents
- Prompt text, reference images and instructions for sending them to AI
- How to use
- Edit the product and colors in the prompt, then send it to AI with the reference images.
Price TBDExample contents
Example files to send to AI
prompt.txt“Layer the clothing images from front to back. On hover, swing one item toward the viewer around its hanger.”
THE IDEA
About this work
Bring the feeling of browsing a clothing rack to the web. Drag through your collection, preview a garment around its hanger, and explore its details in an expandable gallery. Customize the images, colors, spacing and motion to fit your brand.
Features & expressions
- Pseudo-3D depth built from layered transparent 2D product images
- Horizontal drag, mouse-wheel and keyboard navigation
- Hanger-pivot garment previews on hover
- Smooth GSAP travel to the selected product's position
- Optional two-click preview-and-follow interaction
- Responsive layouts with touch dragging and two-tap selection
- Expandable detail panel with deeper garments fading out
- On-body, back-view and fabric galleries with image enlargement
- Custom product images, content, count, order and visibility
- Adjustable colors, spacing, depth, size, preview angle and animation speed
- Custom branding and product-detail content
- OS reduced-motion preference support
Make it your own.
Understand how it works, then bring your own idea to it. Review the materials, requirements and license before choosing a pack.
Requirements
Development requires Node.js 22.12–24.x, npm and basic React knowledge. The component uses React / React DOM 18–19 and GSAP.
Includes a Vite demo and a Next.js App Router example. No WebGL engine or 3D models are required.
Verified stack: Windows, Node 24.14.1, npm 11.11.0, React 19.3.1 / 18.3.1, GSAP 3.15.0 and Next.js 16.4.3.
Browser interaction was checked in desktop Chromium at 1280×720 and a mobile-sized Chromium viewport at 390×844. Separate Safari / Firefox and physical iOS / Android testing has not been completed.
Latest package verification: November 2, 2026.
Includes a Vite demo and a Next.js App Router example. No WebGL engine or 3D models are required.
Verified stack: Windows, Node 24.14.1, npm 11.11.0, React 19.3.1 / 18.3.1, GSAP 3.15.0 and Next.js 16.4.3.
Browser interaction was checked in desktop Chromium at 1280×720 and a mobile-sized Chromium viewport at 390×844. Separate Safari / Firefox and physical iOS / Android testing has not been completed.
Latest package verification: November 2, 2026.
What is included
React / TypeScript component source, type declarations, scoped CSS and compiled ESM JavaScript
Configuration files, dependency lockfiles and automated tests
12 sample product records and 12 generated assets: four garment cutouts and eight on-body / back-view images
A Vite / React customization demo using the same component
Basic integration example, Next.js App Router example and Vercel deployment instructions
English README, quick start, props reference, commercial license and asset / third-party notices
The 12 product records reuse four garment designs. A prompt pack, accessory showcase, cart, checkout, CMS and hosting are not included.
Configuration files, dependency lockfiles and automated tests
12 sample product records and 12 generated assets: four garment cutouts and eight on-body / back-view images
A Vite / React customization demo using the same component
Basic integration example, Next.js App Router example and Vercel deployment instructions
English README, quick start, props reference, commercial license and asset / third-party notices
The 12 product records reuse four garment designs. A prompt pack, accessory showcase, cart, checkout, CMS and hosting are not included.
License
One purchase permits commercial use across unlimited websites and projects, including your own sites and client projects. Code and design modification and delivery of the completed client's website source are permitted.
Development, testing, staging, production, translations, separate brands and independent websites are covered without additional purchases. Lawful licensed use has no expiration date.
Resale or redistribution of the Kit itself is prohibited. Included images may be used and modified within licensed websites, but not redistributed as a standalone asset pack. Third-party libraries retain their own licenses.
The Kit is provided as is. Liability is limited to the amount paid for the relevant purchase, except for intentional misconduct, gross negligence and liability that cannot lawfully be limited. Japanese law applies, with the Saitama District Court as the court of first instance, subject to mandatory law.
See the included LICENSE.md for the full terms. Licensor and product supplier: TSURU KAWAGOE.
Development, testing, staging, production, translations, separate brands and independent websites are covered without additional purchases. Lawful licensed use has no expiration date.
Resale or redistribution of the Kit itself is prohibited. Included images may be used and modified within licensed websites, but not redistributed as a standalone asset pack. Third-party libraries retain their own licenses.
The Kit is provided as is. Liability is limited to the amount paid for the relevant purchase, except for intentional misconduct, gross negligence and liability that cannot lawfully be limited. Japanese law applies, with the Saitama District Court as the court of first instance, subject to mandatory law.
See the included LICENSE.md for the full terms. Licensor and product supplier: TSURU KAWAGOE.
Support
30 days of free support after purchase for initial integration questions and reproducible product defects. Individual customization and repairs to third-party code are excluded.
Released v1.x fixes are free for purchasers. No release period or frequency is guaranteed. The next major version is a separate product.
Refund requests within 14 days after purchase are eligible for accidental duplicate purchases, material discrepancies from the product description, or material defects that normal support cannot resolve. Change-of-mind refunds are generally excluded. Applicable law and Lemon Squeezy's refund policy remain unaffected.
Contact https://tsuru-official-home.com/contact/ and select GENERAL INQUIRY. Include the product name, order reference and issue.
Released v1.x fixes are free for purchasers. No release period or frequency is guaranteed. The next major version is a separate product.
Refund requests within 14 days after purchase are eligible for accidental duplicate purchases, material discrepancies from the product description, or material defects that normal support cannot resolve. Change-of-mind refunds are generally excluded. Applicable law and Lemon Squeezy's refund policy remain unaffected.
Contact https://tsuru-official-home.com/contact/ and select GENERAL INQUIRY. Include the product name, order reference and issue.
Third-party licenses
React／React DOM、Next.js、Vite: MIT。
TypeScript: Apache-2.0。
GSAP: GSAP Standard No-Charge License。GSAPをMITとして扱わず、同梱の通知と公式条件を保持してください。
その他の依存関係は各ライセンスが適用されます。詳細はTHIRD_PARTY_NOTICES.mdおよび同梱のthird-party-licensesを参照してください。
サンプル画像は販売者が再配布を許可した生成素材と、その参照から制作した生成画像です。利用条件はASSET_LICENSES.mdとLICENSE.mdに従います。フォントファイルは同梱していません。
TypeScript: Apache-2.0。
GSAP: GSAP Standard No-Charge License。GSAPをMITとして扱わず、同梱の通知と公式条件を保持してください。
その他の依存関係は各ライセンスが適用されます。詳細はTHIRD_PARTY_NOTICES.mdおよび同梱のthird-party-licensesを参照してください。
サンプル画像は販売者が再配布を許可した生成素材と、その参照から制作した生成画像です。利用条件はASSET_LICENSES.mdとLICENSE.mdに従います。フォントファイルは同梱していません。
Frequently asked questions
- Do I need 3D models or Three.js?
- No. The rack creates depth using transparent 2D images, transforms, stacking and GSAP animation.
- Can I use my own product images?
- Yes. Prepare transparent PNG or WebP cutouts including the hanger, then update the image paths in your product data. You can also try replacing an image in the demo.
- Can I use this with Next.js?
- Yes. A Next.js App Router example is included. The component can also be integrated into an existing React application.
- Does it work on mobile?
- It supports touch dragging and two-tap selection. A mobile-sized Chromium viewport was verified; physical iOS and Android devices have not yet been tested.
- Are playground changes saved?
- Changes are local previews and reset on reload. Transfer your chosen values into the component configuration to keep them.
- Are cart and checkout features included?
- No. This Kit provides the clothing-rack presentation interface. Cart, checkout and CMS integrations are implemented in your own project.
- Can I use it for a client?
- Yes. One purchase covers unlimited commercial websites and client projects, including modifications and delivery of the completed client's site source.
- Is a prompt pack included?
- No. The current Complete Kit includes the component, sample assets, integration examples and documentation.
Changelog
1.0.0 · Tested 2026-11-02
2026-11-02 / v1.0.0: 洋服ラック単体のReact UI Kitとして正式版を作成。販売条件を確定し、LICENSE・README等へ反映。購入者ZIPを新規展開してnpm ci・ビルド・自動テスト10件を確認。Next.js導入例、PC／スマホ相当表示の操作、ZIP整合性を検証。
GALLERY 03
Select to enlarge
