Design Saboteurs

Your Dil, warped. Every saboteur is a heart that forgot its shape.

Hover to see the tell. Click to repair it.

Baseline

This is what health looks like. Everything below is a deviation from it.

#00 Dil

Calm float. Blinks. Leans toward you. This is what health looks like.

The Eleven

Ten patterns. You will recognize at least one.

#S1 The Pixel Polisher

One lobe perfected, one edge neglected. Too focused to breathe. Move your cursor and nothing happens. It is not in the room you are in.

Tell.
Right lobe over-resolved into 3px micro-pixels; left perimeter missing 3 blocks.
Noticed.
None. The only saboteur that never reacts to the cursor.
Cure.
Micro-pixels merge back to 6px blocks, missing blocks restore, float resumes.
#S2 The Yes-Machine

Stretched wide from absorbing everything. The smile never turns off. Move anywhere and it nods faster.

Tell.
Stretched to 130% width. A smile that never turns off.
Noticed.
Any cursor movement anywhere in frame triggers a nod burst.
Cure.
Width eases to 100%, nod decelerates into the 2.5s float.
#S3 The Portfolio Ghost

Ships constantly, documents nothing. Fifteen percent solid. No shadow. Hover and it fades further. Being noticed is the threat.

Tell.
Fill at 15% opacity, outline at 40%.
Noticed.
On hover, fades toward 5%. Being noticed is the threat.
Cure.
Opacity fills to 100%, shadow appears beneath it for the first time.
#S4 The Silent Presenter

Strong work, weak defence. Eyes on the floor, barely breathing. Approach and it shrinks.

Tell.
Intact heart at 60% scale, low in frame, eyes on the floor.
Noticed.
Cursor approach: shrinks to 50%, eyes drop one more unit.
Cure.
Elastic scale to 100%, eyes lift to centre and hold (Hold Eye Contact).
#S5 The Tool Chaser

Orbited by tools it has not learned. Eyes stuck wide. Never blinks, never settles. Chases your cursor and always overshoots.

Tell.
Four loose prop-pixel clusters orbit the body. Eyes held at surprised.
Noticed.
Chases the cursor with a lag, always overshooting.
Cure.
Props fall away below frame, darting decays into stillness, then float.
#S6 The Lone Craftsman

Healthy float, turned away. Alone looks fine. That is the trap. Notice it and it looks further away.

Tell.
Leaned +8deg, eyes shifted 2 units toward the frame edge.
Noticed.
Cursor approach: eyes shift 1 further unit away, lean deepens to +12deg.
Cure.
Body straightens, eyes travel back to centre and meet the viewer.
#S7 The Trend Mirror

Dressed for the other room. No motion of its own. It only moves when you move. Leave, and it freezes where you left it.

Tell.
Wears the other mode's palette. Always dressed for the other room.
Noticed.
Mirrors the cursor 1:1, no lag, body lean and eyes included. It only exists when you move.
Cure.
Palette snaps to the correct mode, mirroring releases, its own float begins.
#S8 The Scope Martyr

Carrying a pile that was never its own, sinking a little each cycle. Every visitor adds a block. Try it.

Tell.
Six loose blocks piled on the top lobes at reduced opacity. Sleepy slits, held.
Noticed.
Every cursor approach adds one more block to the pile.
Cure.
Blocks drop off one by one, body rises back to baseline, float recovers.
#S9 The Feedback Flincher

Already cracked. Eyes closed by default, opening only in flashes. Approach and it hops away from you.

Tell.
Carries the 404 crack permanently. Eyes closed by default, open only in flashes.
Noticed.
Cursor approach: hops 6px backward. The Surprised hop, inverted into retreat.
Cure.
Full Crack and Repair, then eyes open and hold.
#S10 The Consensus Chaser

Split down the middle, out of phase with itself, each eye watching a different audience. It leans toward whoever moved last.

Tell.
Split vertically down the centre, halves offset 3px. Left eye looks left, right eye looks right.
Noticed.
Cursor left, both halves lean left. Cursor right, both lean right. Follows whoever moved last.
Cure.
Halves slide into alignment, floats synchronise, eyes centre. One heart, one decision.
The Master

This one activates the others.

#S0 The Impostor

Outline only. Moves exactly like the real thing, casts no shadow, eyes too small for its face. Notice it and it starts to fade.

Tell.
Casts no shadow. Nothing inside to cast one.
Noticed.
On cursor approach, outline drops to 70% opacity. Recovers slowly after cursor leaves.
Cure.
Scroll-fill: outline, then half, then full. "Over the years it filled in."

You have claimed 0 of 11.

Nothing claimed. Sit with the page a while longer. They are quiet at first.

Every designer has a Dil. These are the shapes mine has taken.

Dil Saboteurs. Part of Design with Dil.
Don't create art for your users. Create experience for them.

→ Back to Dil