Preview source
The source behind the live browser build, with the page component, data, motion styles, and project assets.
Download preview codeTheme 002 / Live build
Unruled.Monochrome streetwear storefront.
A high-impact fashion homepage rebuilt from a supplied visual reference as an original, fully responsive site: cinematic photography, oversized kinetic type, tactile product cards, and smooth interactions with no borrowed branding or code.
01 / Live preview
Use it before you download it.
This is the real theme route, not a video or screenshot. Change the viewport, open the menu, search, inspect a product, select a size, and test the demo bag.
This preview is interactive: open the menu, products, search, and size controls.
02 / Three-part release
Everything inside one design.
Use the live build to judge the experience, the source to understand it, and the editable folder to turn it into your own project.
Editable theme
A clean theme folder with design tokens, section map, content guide, editable components, and original campaign assets.
Download theme folderProject abstract
A short visual and technical brief covering the design idea, information architecture, motion rules, and browser notes.
Download abstract PDFThe supplied screenshot was used as a visual composition reference. The Unruled name, copy, component code, interactions, garment artwork, and all seven shipped campaign images are original to this Hanubees build.
03 / Editable system
A mood you can actually tune.
Tokens keep the visual language centralized. Motion is layered in progressively, so the page remains readable without JavaScript and calm when a visitor prefers reduced motion.
Palette + type
Five core colors and system-first typography keep the theme fast, portable, and easy to rebrand.
#050505#F2F0EA#9D9C97#E8FF45#B54F2C
Motion hierarchy
Movement supports hierarchy, product feedback, and spatial understanding rather than decorating every surface.
- Hero line reveal900ms / enter
- Product image hover800ms / intent
- Drawer transition520ms / spatial
- Story revealObserver / once
04 / Inspect the code
The headline is real HTML.
Branding and typography stay selectable and editable. Photography carries the atmosphere; semantic markup and CSS carry the interface.
<section className="ur-hero" onPointerMove={updateHeroPointer}>
<div className="ur-hero__media" aria-hidden="true">
<Image src="/hero-campaign.png" alt="" fill priority sizes="100vw" />
<span className="ur-hero__split" />
<span className="ur-hero__spotlight" />
</div>
<div className="ur-hero__copy">
<p>Campaign 001 / 2026</p>
<h1 aria-label="Move past the frame">
<span><i>MOVE</i></span>
<span><i>PAST</i></span>
<span><i>THE FRAME</i></span>
</h1>
<a href="#drop">Enter drop 001</a>
</div>
</section>
.ur-word { display:block; overflow:hidden; }
.ur-word i {
display:block;
transform:translateY(112%) rotate(2deg);
animation:word-in 900ms cubic-bezier(.2,.75,.2,1) forwards;
}
@keyframes word-in { to { transform:none; } }
@media (prefers-reduced-motion:reduce) {
.ur-word i { animation-duration:.01ms; }
}Performance rule
The interactive layer is isolated to one client component. Layout, metadata, download links, and library content remain server-rendered, while product state and preview controls hydrate only where needed.