Dezmall has built a reputation in the 3D animation community for high-quality textures and fluid character modeling, and this short is no exception. The visual fidelity here is striking.
Unlike the stylized, exaggerated look of Batman: The Animated Series or the graffiti-vibe of the Harley Quinn animated show, Dezmall opts for a semi-realistic, almost cinematic look. The details in the character's expressions—shifting from the professional, reserved Dr. Quinzel to the unhinged Harley—are the highlight of the piece. The audio design also deserves praise; the sound editing amplifies the tension, making the transformation feel visceral and intense. The Rise Of A Villain Harley Quinn -Dezmall-
[
"id": "origin",
"year": 1992,
"title": "Harleen Quinzel – The Doctor",
"image": "/assets/harley/origin.jpg",
"description": "A brilliant psychiatrist at Arkham Asylum who becomes fascinated by the Joker.",
"link": "https://example.com/articles/harley-origin"
,
"id": "joker-partner",
"year": 2000,
"title": "Harley & Joker – Partners in Crime",
"image": "/assets/harley/joker-partner.jpg",
"description": "From *Batman: Mad Love* to *Harley Quinn* (2000), their chaotic partnership defines her early years.",
"link": "https://example.com/articles/harley-joker"
,
"id": "solo-hero",
"year": 2014,
"title": "Harley Quinn – Solo Anti‑Hero",
"image": "/assets/harley/solo-hero.jpg",
"description": "The *Harley Quinn* solo series (2014‑present) shows her break from the Joker and rise as a complex villain‑hero.",
"link": "https://example.com/articles/harley-solo"
]
Add as many cards as you like (e.g., 2020 Suicide Squad movie, 2022 Birds of Prey etc.). Dezmall has built a reputation in the 3D
Harleen stands before her closet. One side holds conservative cardigans (doctor). The other holds her old gymnastics leotard (past). She rips both apart and sews them into the harlequin suit. The sound design—scissors snipping, thread pulling—mimics heartbeat. This is the auditory signature of her birth as a villain. Add as many cards as you like (e
/* ---- Core Colors – adjust to Dezmall branding ---- */
$primary:#ff4081; // pink (Harley vibe)
$bg:#1a1a1a; // dark background for contrast
$text:#f5f5f5;
/* ---- Layout ---- */
#harley-evolution
max-width: 960px;
margin: 2rem auto;
padding: 1rem;
color: $text;
background: $bg;
border-radius: 8px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
/* Timeline navigation */
.timeline-nav
display: flex;
align-items: center;
gap: .5rem;
margin: 1rem 0;
.nav-btn
background: transparent;
border: none;
color: $primary;
font-size: 1.5rem;
cursor: pointer;
&:disabled opacity: .3; cursor: default;
.timeline-track
flex: 1;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
gap: 1rem;
padding: .5rem 0;
.timeline-card
flex: 0 0 180px;
background: #262626;
border-radius: 6px;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
&:hover, &.active
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(#000, .4);
border: 2px solid $primary;
img width: 100%; border-top-left-radius: 6px; border-top-right-radius: 6px;
.title padding:.5rem; font-weight:600; text-align:center;
/* Fact‑box */
.fact-box
margin-top: 1rem;
padding: 1rem;
background:#2d2d2d;
border-left: 4px solid $primary;
border-radius: 4px;
min-height: 150px;
.placeholder opacity:.6;
img max-width:120px; float:left; margin-right:1rem; border-radius:4px;
/* CTA bar */
.cta-bar
margin-top: 1.5rem;
display:flex; gap:1rem;
button
background:$primary;
border:none;
color:#fff;
padding:.6rem 1rem;
border-radius:4px;
cursor:pointer;
&:hover background:darken($primary,10%);
/* Responsive – Mobile */
@media (max-width:600px)
.timeline-card flex:0 0 140px;
.fact-box font-size:.9rem;