Air Jordan — Artwork ASCII Animada

The user wants an ASCII artwork of Michael Jordan that is not static - meaning it should be animated. Since my response will be rendered in an iframe/web browser, I should create an HTML page with an animated ASCII art of Michael Jordan. I should create something like: 1. An ASCII art of Michael Jordan (probably his iconic dunk pose - the "Jumpman" silhouette) 2. Animation - could be: - A dunking animation sequence - Flying/jumping animation - Color effects - Text effects Let me think about creating an ASCII art of Michael Jordan's famous free-throw line dunk pose. I could create multiple frames showing him jumping and dunking. I could use JavaScript to animate between frames, or use CSS animations with JS to update the ASCII art. Let me design a few frames of MJ dunking: Frame ideas: 1. MJ in the famous "Jumpman" pose - legs spread, arm extended with ball 2. Could animate the ball going into the hoop 3. Could animate him moving through the air Let me create the ASCII art. The Jumpman pose is iconic: - Legs spread apart (one forward, one back) - One arm extended up/back with the basketball - Body leaning Let me draw this in ASCII: ``` ___ /o o\ \_ _/ | | _____ / \ / \____/ | | o / \ \ / \ \____ / \ \ / \ \ \ /\ \ / \ \ / \ \_/ \_ ``` Hmm, let me think of a better approach. I'll create a multi-frame animation showing MJ jumping from the free throw line and dunking. Actually, a really cool approach would be: 1. Show a basketball court scene 2. MJ starts at one point, rises through the air (the famous free throw line dunk) 3. Dunks the ball 4. Maybe add some effects Let me create several frames: Frame 1 - Takeoff: ``` ___ | | |___| ___ | | |___| | | ___| | / | o / | /|\ | | / \ \ | / \ \ | / \ \ | ________________/_______\___________\___|____ ``` This is getting complex. Let me simplify and make the classic Jumpman silhouette in ASCII, and animate it moving across the screen toward a hoop, then dunking. The Jumpman pose: - Head up - Right arm extended up with ball - Left arm back - Left leg forward, right leg back (split in air) Let me draw: ``` (O) <- ball \ \___ /| \ / | | | /| / | / | / | / \ | \ ``` Let me try harder at the Jumpman: ``` O \| |\ /| \ / | | | \ | \ /\ / \ / \ | \ | \ _| \_ ``` Hmm, the Jumpman has: - Ball in right hand, raised high to the right - Left arm extended left - Left leg kicked forward-left - Right leg kicked back-right ``` ___O___ | \ / | | \ | \ | \| | /| / | / | / | / | / \ / \ / \ | \ ``` Let me look at the actual Jumpman logo: MJ is in mid-air, legs split wide (left leg forward bent, right leg back), right hand holding ball up high behind his head, left arm extended down-left. ASCII attempt: ``` ___ (o o) <- ball \_/ ___ \ / \/\ | __\ \ / | | / \ / \ / | / | / \ | \ _| \_ ``` Let me do this more carefully, character by character. The Jumpman: ``` O __/| / | / | \ / | | / \ / \ / \ / \ | \ | \ ``` OK here's my refined plan. Instead of obsessing over one perfect static image, I'll create an animation with: 1. A hoop on the right side 2. MJ figure that flies from left to right in an arc (parabola) 3. Multiple pose frames: running, jumping, gliding (Jumpman pose), dunking 4. Ball slam effect with text "SLAM DUNK!" or "23" 5. Maybe stars/particles when dunking 6. Classic Bulls colors (red/black) I'll use JavaScript with requestAnimationFrame or setInterval to animate. Let me design the frames: Frame: Running pose ``` O /|\~ / \ / \ ``` Frame: Jumpman gliding (main frame) ``` ___ _/o o\___ / \_/ \ | | \ |___/ \ | \ | \| /| / | / | / | / \ / \ | \ ``` Hmm, I keep struggling. Let me be very deliberate with a grid. I'll make the Jumpman about 15 rows tall. Row by row for the Jumpman pose (arms: right arm up-right with ball, left arm down-left; legs: left leg forward bent, right leg extended back): ``` ..........(@)......... .........//........... ........//............ ...____//____________. ../................\.. ../.....(•)......\.. ..\......|......./.. ...\.....|....../... ....\.../|\..../.... .....\/.|.\.//...... ......\.|..//....... .......\|./......... ........|........... ......./|\.......... ....../.|.\......... ...../..|..\........ ..../...|...\....... .../....|....\...... ../_____|_____\..... ``` This isn't quite working. Let me think of the silhouette differently. The Jumpman logo silhouette: - Head (circle) - Ball above and to the right of head, held by right hand - Body angled - Left arm extended to lower left - Right arm up to ball - Left leg forward (bent at knee, foot forward) - Right leg back extended ``` ___ ( O ) <- ball |_/ ___/ | / | / .-' | / \_/ | /|\ / | \ / | \ | | \ | | | \ / | V | / / | | ``` I think I should just carefully craft it. Let me use a monospace grid mentally, 30 wide, 20 tall: ``` ___ (@ @)___ \_/ \ | \ /|\ | / | \ / / | \_/ | | \ | \ | \| / \ / \ / \ | \ | \ ``` OK you know what, I'll go with a simpler but recognizable approach and make the ANIMATION the star. Let me create: 1. MJ silhouette in a decent Jumpman pose (I'll craft it carefully) 2. He flies across the screen following a parabolic arc 3. The hoop is on the right 4. When he reaches the hoop, switch to a dunk frame + impact effects (stars, screen shake, "BOOM!" text) 5. Scoreboard showing "CHICAGO 23" 6. Crowd of ASCII people cheering at the bottom 7. Red color theme (Bulls) Let me carefully make the Jumpman ASCII. I'll look at it as a silhouette: ``` _ __(O)__ | __| \ / ____V____ / /\ \__ / / \ \ | | \ | \| | / | / / | / | / | / \ / \ | \ _| \ ``` Alright, let me just commit to a design. Here's my final Jumpman frame (glide pose): ``` ___ |o o|____ |___| \ | \ ____| | / /| / / / | / | | | | \ | |____/ \ | | \| | | | / \ / \ / \ / \ | \ | \ ``` Hmm. Let me try yet another approach - a cleaner, more stylized version: ``` o \|\___ | \ \ | __/ |__/ / | / | | | | | \ \ \ \ \ \ \__\ ``` Honestly, for ASCII art animations, slightly simpler figures with great motion work better. Let me design the whole scene: The scene (about 70 chars wide, 24 tall): ``` ╔════════════════════════════════════════════════════════════════════╗ ║ CHICAGO 23 - THE LAST DANCE ║ ╚════════════════════════════════════════════════════════════════════╝ _______ | | \ / |___| | | | |_|_| <- net | (backboard/rim area) o /|\___ | \ \ | __/ |__/ / | / | | | | | \ \ \ \ \ \ \__\ ════════════════════════════════════════════════════════════════════ | /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ /\ | | < crowd of cheering fans > | ``` Actually, let me structure the animation phases: Phase 1: MJ dribbling at left (bouncing ball) Phase 2: Takes off (crouch then leap) Phase 3: Gliding through the air in Jumpman pose (moves right along arc, this is the money shot - hold it longer) Phase 4: Dunk! Ball through hoop, rim/net animation, flash effects Phase 5: MJ lands, crowd goes wild, "AIR JORDAN" text flashes Loop back For movement, I can put the MJ ASCII inside a
 and move it with CSS transforms (position absolute, translate based on parabola). The hoop is another pre. Crowd at bottom.

Effects:
- Screen shake on dunk (CSS animation on container)
- Flash (background color pulse)
- Stars/particles (spawning ASCII chars that fall)
- Text "SLAM!" / "23" appearing
- Crowd bouncing

Colors: black background, red MJ (#e31837 Bulls red... actually #CE1141), white/gray court, orange ball, maybe the rim red.

Let me now carefully craft each MJ frame in ASCII. I'll use a consistent character box roughly 14 wide x 13 tall.

Frame A - Dribble/stand with ball:
```
    ___
   (o_o)      <- hmm, better a plain head
```

Let me use simple head: ` O ` (an O for head), ball: `(@)` or `(O)`.

Dribble frame:
```
     O
    /|\
   / | \
     |
    / \
   /   \
  /     \
 |       |
```
With ball below at different heights animating.

Crouch frame (before jump):
```
      
   O
  /|\__
  |    
   \___
  /    
 |     
/      
```

Jump/glide frame (Jumpman pose) - the important one:

Let me really nail it. Reference: legs split, left leg forward-up, right leg back; right arm up holding ball high; left arm back-down; head looking forward/up.

Grid 16 wide, 12 tall:

```
col:  0123456789abcdef
row0: .........(@)....    <- ball in right hand raised
row1: .......//........    <- right forearm
row2: ......//.........    
row3: .....O/..........    <- head + arm junction
row4: ....-|\..........    <- left arm starting
row5: .../..\\.........    <- torso + right side
row6: ../....\|........    
row7: ./......\........
row8: |.......\.......
row9:  \.......\.....
row10:  \....../\....    <- legs split
row11:   \..../  \...
row12:    \__/    \_.
```

Hmm, the Jumpman has the legs split VERY wide with the left leg bent forward. Let me try again:

```
row0: ...........(@)..
row1: ..........//....
row2: .........//.....
row3: .....O..//......
row4: ....-|\\/.......
row5: .../..||........
row6: ../...||........
row7: ./....||........
row8: /.....||........
row9: |...../|\.......
row10: \.../.|.\......
row11: .\./..|..\.....
row12: ..V...|...\....
row13: ......|....\...
row14: ...../......\..
row15: ....|........\.
row16: ..._|.........\
```

The legs: left leg forward (toward basket), right leg trailing back. In the logo, left leg is bent with knee up, foot down. 

You know, let me simplify to a strong silhouette style:

```
            (@)
           //
       O  //
      /|\/
     / |
    |  |
    |  |
    |   \
     \   \
      \   \___
       \      \
        \      \
         \______\
```

Left arm up with ball, torso, then the right leg trailing far back, left leg... hmm.

Final decision - I'll draw it as:

```
        ___        <- this is the ball holder area
       ( @ )       
        \_/        
     O  /          
    -|-/           
    /|\            
   | | \           
   | |  \          
   |/    \         
   /      \        
  |        \       
  |         \      
 /           \___  
|                  \
```

I'm overcomplicating. Let me settle on THIS design (I'll count chars carefully later in code):

GLIDE (Jumpman) frame — 14 rows:
```
          (O)___
           _/   
          /     
     O   /      
    |\  /       
    | \/        
    |           
   / \          
  /   \         
 |     \        
 |      \___    
/            \  
|             \_
```

Hmm the arm holding the ball. In the Jumpman logo the ball is BEHIND/ABOVE the head on the right side, arm fully extended upward-right.

Let me define direction: MJ moves left-to-right toward the hoop on the right. So his face/front points right, ball in right hand up-right, left arm trailing back-left, left leg forward-right (knee bent up), right leg trailing back-left extended.

GLIDE frame:
```
row0:  .......(@).....
row1:  ......//.......
row2:  .....//........
row3:  ..O./.........    <- head, arm angle
row4:  ./\/..........    <- hmm
```

Ugh. Let me try with the body leaning forward:

```
row0:  ........(@)....
row1:  .......//......
row2:  ......//.......
row3:  .....//........
row4:  ....O/.........    <- head at top of torso, right arm up
row5:  .../-|.........    
row6:  ../...\........    <- torso diagonal, left arm back
row7:  ./....\|.......
row8:  /......\......
row9:  |......\......
row10: \....../\.....
row11:  \..../..\....
row12:   \../....\...
row13:    |/......\..
row14:    |........\.
row15:    \.........\
row16:     \___......\
```

Too messy. SIMPLIFY. Here's my clean final glide pose:

```
        (@)
        //
       //
   O  //
  /|\/
  | |
  | |
  |  \
   \  \
    \  \____
     \      \
      \      \
       \______\
```

Read: ball top right, arm (//) coming down to body, head O, left arm /|\ hmm.

Actually let me make it unambiguous with distinct limbs:

```
         (@)           <- ball
         |/            <- right hand gripping
   O ----+             <- hmm no
```

FINE. Decision: I'll use this well-known style of ASCII basketball player:

```
      O
     \|(@)___          no...
```

OK completely different tactic: use a bigger canvas and draw a filled silhouette using block characters (█). Filled silhouettes are way more readable for poses like the Jumpman. This is the smart move — the Jumpman is literally famous AS A SILHOUETTE.

Using █ and partial blocks, I can make a recognizable Jumpman silhouette. Let me design it on a grid, ~24 wide x 20 tall.

The Jumpman silhouette description:
- Ball at top-right area, right hand extended up-right holding it
- Head below-left of ball
- Left arm extended down-left
- Torso angled from upper-right to lower-left... actually torso is roughly vertical, leaning slightly
- Left leg: extended forward (to the left in logo, but in our case to the RIGHT toward hoop... 

Wait — in the Jumpman logo, MJ faces left? Let me recall: The logo — ball in his right hand, up high on the RIGHT side of the image. His head is left of the ball. His left arm extends to the LEFT. His LEFT leg kicks forward to the LEFT (bent), and his RIGHT leg extends back to the RIGHT. So he's "moving" to the LEFT in the logo (head/left side forward).

Hmm, actually in the logo he faces left: left arm pointing left-down, left leg kicked left-forward, ball in right hand raised behind/right of head. The dunk motion is toward the left.

For our animation moving left→right, I can just mirror it. Fine.

Let me build the filled silhouette grid (mirrored: moving right, ball right hand up-right):

I'll draw on a 22x18 grid using # for filled:

```
......................     row 0
.............####.....     row 1   <- ball
............######....     row 2
.............####.....     row 3
..............##......     row 4   <- wrist/hand
............###.......     row 5   <- forearm
..........#####.......     row 6   <- upper arm
.......#..######......     row 7   <- head # at col 7? 
......###.######......     row 8   <- head + shoulder
......##########......     row 9   <- shoulders/chest, left arm starts left
.....###########......     row 10
....############......     row 11  <- torso
...############.......     row 12  <- torso + left arm extending
..#############.......     row 13  <- left arm tip
..##########..........     row 14  <- hips
..##########..........     row 15  <- left leg forward bent...
```

Hmm wait, if mirrored (moving right): right leg trailing back-left extended, left leg forward-right bent with knee up? No wait. Original logo: left leg forward bent (knee up, foot dangling), right leg extended back straight. Mirrored: right leg forward bent, left leg extended back.

Let me just draw the ORIGINAL orientation (facing left) and put the hoop on the LEFT, MJ flies right→left. Or mirror by drawing moving-right version. Easier: draw original facing-left Jumpman, hoop on left side, animation goes right to left. Actually many people do the free-throw dunk left to right... doesn't matter visually. I'll go hoop on LEFT? Hmm, reading direction... basketball fast breaks often shown left-to-right. 

Whatever — I'll mirror the logo: facing RIGHT, ball in LEFT hand up-LEFT? No...

The logo: ball is in his right hand. If mirrored, ball in left hand raised to upper-right as he moves right. That looks natural: trailing arm holding ball up behind... no wait, if he moves right and ball hand is up to the upper-LEFT (behind him), that's the classic wind-up tomahawk look. Actually in the logo the ball is on the same side as his BACK. He faces left, ball in right hand to the right (behind head). So mirrored: faces right, ball in left hand to the upper-left (behind head). 

Hmm, but for a dunk animation, having the ball LEADING (in front, toward hoop) looks better for the dunk moment. For the glide though, ball held back high = classic. Then at dunk, arm swings forward. 

Design: GLIDE pose = ball up-back (upper-left of body), body leaning forward-right, front (right) leg bent with knee up toward hoop, back (left) leg extended. At DUNK pose = ball slams down into hoop, arm extended forward-down toward rim.

Let me draw the GLIDE silhouette grid (24 cols x 18 rows), facing right, ball upper-left:

```
cols: 012345678901234567890123
row0:  ..####.................   <- ball
row1:  .######.................
row2:  ..####.................   wait ball on left upper? Let me place ball at cols 2-7
```

Hmm, actually — hold on. Let me reconsider: maybe ball up-RIGHT (in front) like the actual photo the logo came from! In the original 1984 photo by Co Rentmeester, MJ holds the ball in his LEFT hand raised up and to the LEFT, and his body faces... the famous photo: he's doing a grand jeté (ballet leap), ball in left hand up-left, right arm extended right-down, legs split — left leg forward-left? The photo has him moving left, ball left hand upper left, right arm to the right, right leg back right, left leg forward left bent.

The Jumpman LOGO is based on that photo. In the logo (as commonly seen, e.g., on shoes): he faces LEFT, ball in left?? hand upper-left... 

Checking memory of the logo silhouette: The figure faces left. Arm with ball: upper left. Other arm: extended to lower right? No... The logo: right arm extended down to the right with hand open, left hand holds ball up-left? I believe: ball upper-left in left hand; right arm extended right; left leg forward-left bent; right leg trailing right extended straight. Yes, that matches the Rentmeester photo: ball LEFT hand upper-left, he's leaping leftward with legs in split.

OK so exact arm-leg mapping isn't critical. What matters: ball up on the side he's MOVING TOWARD. So if MJ flies right toward a right-side hoop, ball should be upper-RIGHT in his leading hand, other arm trailing left, leading leg (right) bent forward, trailing leg (left) extended back. 

GLIDE grid (24 wide, 18 tall), facing right, ball upper-right:

```
row 0:  ..............####......
row 1:  .............######.....
row 2:  ..............####......
row 3:  ...............##.......
row 4:  .............####.......      <- forearm angled
row 5:  ............####........      
row 6:  ......##...####.........      <- head appears
row 7:  .....##########.........      <- head+shoulders
row 8:  ....############........      
row 9:  ...#############........      <- left arm begins trailing
row10:  ..##############........      
row11:  .###############........      <- left arm extending left-down
row12:  ########.#######.........      <- left hand, torso tapering
row13:  .######...######.........      
row14:  ..###....########........      <- hips, front leg starts (bent, going right)
row15:  ..##.....##########.....      <- back leg starts (going left-down), front knee
row16:  .##......###########....      
row17:  ##.......#####..####....      
row18:  ##......####......##....
```

Hmm, this needs the classic WIDE split. Let me make the legs really split: trailing leg going far left-down, leading leg bent with knee pointing right.

Let me redraw the bottom half:

```
row12:  ########..######..........
row13:  .######....######.........
row14:  ..###......######..##....     <- front thigh emerging right
row15:  ..##......######..####...     
row16:  .##.......#####..######..     <- front knee bent, going down-right
row17:  ##........####...########
row18:  #.........###.....########   <- hmm front foot
```

And trailing leg continues to bottom-left:
```
row15:  ..##......######..####...
row16:  .##.......#####..######..
row17:  ##........####....#######
row18:  #.........###......######   <- back foot at col0-1, front foot cols ~13-19?
```

This is getting hard to eyeball. Let me think about it as vector shapes and rasterize mentally... Actually — better idea: I'll write the silhouette using a compact approach in the code: define the art as strings directly (I'll handcraft them as best I can), and honestly, for animation purposes, slight imperfection is OK. But I want it to look GOOD.

Alternative smarter approach: Use the well-known small ASCII versions of the Jumpman that already exist. There's a popular one:

```
      o
     /|
    / |   o
   /  |  \|
  |   |   |
  |   |
   \  |
    \ |
     \|
     / \
    /   \
   /     \
  /       \
```

Not great either.

You know what? Let me do the filled-block silhouette approach but I'll be very systematic. I'll design it in a text grid right here, iterating until it reads as the Jumpman. Canvas: 26 cols × 20 rows. Facing right. Elements:

1. Ball: 4x4-ish block at top right, cols 16-20, rows 0-3
2. Hand/wrist connecting ball to arm: col 15-17, rows 3-5
3. Right arm (holding ball): from shoulder (col 10, row 8) up to ball — diagonal thick line
4. Head: 3x3 block at cols 9-11, rows 6-8
5. Torso: from shoulders (row 8-9, cols 8-13) tapering down to hips (cols 8-11, row 13)
6. Left arm (trailing): from left shoulder (col 8, row 9) extending left-down to hand at (col 1, row 12)
7. Front leg (right, bent): thigh from hip (col 10, row 13) going right to knee (col 16, row 15), then shin down to foot (cols 14-17, row 18)
8. Back leg (left, extended): from hip (col 8, row 13) going left-down to foot at (cols 0-2, row 18)

Let me now fill the grid row by row (col 0-25):

Row 0: ball top: cols 16-19 → `................####........`
Row 1: ball: cols 15-20 → `...............######......`
Row 2: ball: cols 15-20 → `...............######......`
Row 3: ball bottom: cols 16-19 + wrist col 17-18 → `................####........`  (keep wrist within ball)
Row 4: wrist/forearm: cols 16-18 → `................###.........`
Row 5: forearm: cols 14-16 → `..............###...........`
Row 6: upper arm + head top: cols 12-14 (arm), cols 9-11 (head) → `.........###..###...........`

Hmm wait, head at cols 9-11 rows 6-8, arm from shoulder (col 11, row 8) to ball. Let me adjust: arm diagonal from (13,5) to (11,8).

Row 6: head cols 9-11, arm cols 12-13: `.........####...............` — hmm cols 9-13 = 5 chars: `.........#####............`
Row 7: head cols 8-11, arm cols 11-13: `........######..............`? Let me merge: cols 8-13: `........######..............` (6 chars from col 8)
Row 8: head bottom cols 9-11, shoulder cols 8-13, arm col 12-14: `........#######.............`
Row 9: chest cols 8-13: `........######..............` (cols 8-13)
Row 10: torso cols 8-12 + left arm starts cols 6-8: `......#######...............` (cols 6-12)
Row 11: torso cols 8-12, left arm cols 4-7: `....#########...............` (cols 4-12)
Row 12: torso cols 8-11, left hand cols 1-4: `.####...####................` (cols 1-4 and 8-11)
Row 13: hips cols 8-11, front thigh cols 11-14: `........#######.............`  (cols 8-14)
Row 14: hips cols 8-10, thigh cols 11-15: `........########............`  (cols 8-15)
Row 15: back leg cols 5-8, front thigh->knee cols 13-16: `.....####....####...........` (cols 5-8, 13-16)
Row 16: back leg cols 3-5, knee cols 14-17: `...###........####..........` (cols 3-5, 14-17)
Row 17: back leg cols 1-3, front shin cols 14-16: `.##...........###...........` (cols 1-2, 14-16)
Row 18: back foot cols 0-2, front foot cols 13-17: `###..........#####..........` (cols 0-2, 13-17)

Hmm, the split isn't dramatic enough and front leg bent pose is weak. In the Jumpman, the front leg (left in logo) is kicked FORWARD and bent — knee high, foot down. The back leg extends straight back-down. The split angle is very wide, nearly horizontal-ish for the front thigh.

Also front leg should reach FORWARD (right, toward hoop) more. Let me push: front thigh from hip (col 10,row13) to knee (col 18, row 14), then shin from knee down-left slightly to foot (col 16-19, row 18). Back leg from hip (col 8, row 13) to foot (col 0-2, row 18) — long straight diagonal.

Revised rows 13-18:
Row 13: hips cols 8-12: `........#####...............`
Row 14: back thigh cols 6-8, front thigh cols 11-16: `......###..######...........`
Row 15: back leg cols 4-6, front thigh/knee cols 14-19: `....###......######.........` (cols 14-19)
Row 16: back leg cols 2-4, front knee/shin cols 17-19: `..###..............###......`
Row 17: back leg cols 0-2, front shin cols 17-19: `###...............###.......`
Row 18: back foot cols 0-3, front foot cols 16-20: `####..............#####.....`

Hmm, front leg: knee at col 18, then shin goes DOWN from knee. Foot at bottom. That reads as bent forward leg. 

But wait — in the Jumpman logo the front leg is bent with the foot dangling under the knee, and knee is the highest forward point. Actually in the logo, BOTH legs are more like: front leg extended forward bent slightly, back leg extended back. Let me look at my memory again: The Jumpman — legs in full split (grand jeté), front leg bent at knee ~90° with foot pointing down, back leg straight trailing. Yes.

I think my design works. Let me also reconsider the head — a bit bigger. And the ball should be clearly separate-ish (ball with hand under it).

Also torso should lean forward slightly (top toward right). Currently cols 8-13 throughout — fine.

Let me also double the arm holding ball: rows 4-8 diagonal: (17,4),(15,5),(13,6),(12,7),(11,8) connecting to shoulder. With thickness 2-3.

Full grid attempt (26 cols, 19 rows), # = fill:

```
row 0: ................####........
row 1: ...............######.......
row 2: ...............######.......
row 3: ................####........
row 4: ................###.........
row 5: ...............###..........
row 6: ........###..####...........  <- head(9-11) + arm(13-16)... 
```

wait arm at row 6 should be around cols 13-15, head cols 9-11. So: `.........###..###..........` (head cols 9-11, arm cols 14-16)? Let me recompute arm diagonal: from wrist (17,4) down-left to shoulder (11,8): points: (16.5,4)→(15,5)→(13.5,6)→(12,7)→(11,8). So:

Row 4: wrist cols 16-17 (+ball bottom already row3). Ball bottom row 3 = cols 16-19. Wrist row 4: cols 16-17.
Row 5: cols 14-15
Row 6: cols 12-13, head cols 9-11
Row 7: cols 11-12, head cols 9-11 → contiguous cols 9-12
Row 8: shoulder cols 8-13

Row 0: `................####........`  cols 16-19
Row 1: `...............######.......` cols 15-20
Row 2: `...............######.......` cols 15-20
Row 3: `................####........` cols 16-19
Row 4: `................##.........` cols 16-17
Row 5: `..............##...........` cols 14-15
Row 6: `.........###.##............` cols 9-11 (head), 13-14 (arm)
Row 7: `.........#####.............` cols 9-13 (head+arm merge)
Row 8: `........######.............` cols 8-13 (shoulders)
Row 9: `.......######..............` cols 7-12 (chest) — lean slightly left at top? The lean: top of torso near head cols 8-13, hips at cols 8-11. fine.
Row 10: `......######...............` cols 6-11 + left arm? Left arm trailing from shoulder col 8 row 9 going down-left to hand (1,12):
Row 9: chest cols 7-12
Row 10: torso cols 8-11, left arm cols 5-7 → `.....###.####..............`? hmm gap? No, arm connects at shoulder col 7-8. Row 10: cols 5-11: `.....#######...............`
Row 11: torso cols 8-11, left arm cols 3-5 → `...###..####...............` (gap cols 6-7? no) — arm should be continuous diagonal: rows 9-12, cols: row9: 6-8, row10: 4-6, row11: 2-4, row12: 1-2 (hand). Torso rows 9-13 at cols 8-12ish.

Row 9:  arm cols 6-8 + torso cols 8-13 → cols 6-13: `......########............`
Row 10: arm cols 4-6 + torso cols 8-12 → `....###..#####............`
Row 11: arm cols 2-4 + torso cols 8-12 → `..###...#####.............`
Row 12: hand cols 1-2 + hips cols 8-12 → `.##.....#####.............`
Row 13: hips cols 8-12 → `........#####..............`
Row 14: back thigh cols 6-8, front thigh cols 11-16 → `......###..######..........`
Row 15: back leg cols 4-6, front thigh cols 14-18 → `....###.......#####........`
Row 16: back leg cols 2-4, front knee cols 16-18, shin start → `..###.............###......`
Row 17: back leg cols 0-2, front shin cols 16-18 → `###..............###.......`
Row 18: back foot cols 0-3, front foot cols 15-19 → `####.............#####.....`

Hmm wait, front leg: thigh goes right (rows 14-15, cols 11→18), then knee at col 16-18 row 16, shin drops straight down rows 16-18 at cols 16-18, foot at row 18 cols 15-19. That gives the bent front leg. 

Total width used: cols 0-20 → 26 wide canvas OK. Height 19 rows.

Let me also reconsider: is the ball too close/far? Ball at rows 0-3, cols 15-20; hand/wrist row 4 cols 16-17. Shoulder row 8. Arm rows 4-8 diagonal. Looks plausible.

Now let me render all rows carefully as strings (26 chars each):

Row 0: cols 16-19 → 16 dots + 4 '#' + 6 dots = "................####......"
Count: 16+4+6 = 26 ✓

Row 1: cols 15-20 → 15 dots + 6 '#' + 5 dots = "...............######....." 15+6+5=26 ✓

Row 2: same as row 1: "...............######....."

Row 3: same as row 0: "................####......"

Row 4: cols 16-17 → "................##........" 16+2+8=26 ✓

Row 5: cols 14-15 → "..............##.........." 14+2+10=26 ✓

Row 6: head cols 9-11, arm cols 13-14 → 9 dots + "###" + 1 dot + "##" + 12 dots = ".........###.##............" 9+3+1+2+12=27 ✗. Need 26: 12→11 dots: ".........###.##..........." 9+3+1+2+11=26 ✓

Row 7: cols 9-13 → 9 dots + "#####" + 12 dots = ".........#####............" 9+5+12=26 ✓

Row 8: cols 8-13 → 8 dots + "######" + 12 dots = "........######............" 8+6+12=26 ✓

Row 9: cols 6-13 → 6 dots + "########" + 12 dots = "......########............" 6+8+12=26 ✓

Row 10: arm cols 4-6, torso cols 8-12 → 4 dots + "###" + 1 dot + "#####" + 13 dots = "....###.#####............." 4+3+1+5+13=26 ✓

Row 11: arm cols 2-4, torso cols 8-12 → 2 dots + "###" + 3 dots + "#####" + 13 dots = "..###...#####............." 2+3+3+5+13=26 ✓

Row 12: hand cols 1-2, hips cols 8-12 → 1 dot + "##" + 5 dots + "#####" + 13 dots = ".##.....#####............." 1+2+5+5+13=26 ✓

Row 13: hips cols 8-12 → 8 dots + "#####" + 13 dots = "........#####............." 8+5+13=26 ✓

Row 14: back thigh cols 6-8, front thigh cols 11-16 → 6 dots + "###" + 2 dots + "######" + 9 dots = "......###..######........." 6+3+2+6+9=26 ✓

Row 15: back leg cols 4-6, front thigh cols 14-18 → 4 dots + "###" + 7 dots + "#####" + 7 dots = "....###.......#####......." 4+3+7+5+7=26 ✓

Row 16: back leg cols 2-4, front knee cols 16-18 → 2 dots + "###" + 11 dots + "###" + 7 dots = "..###...........###......." 2+3+11+3+7=26 ✓

Row 17: back leg cols 0-2, front shin cols 16-18 → "###" + 13 dots + "###" + 7 dots = "###.............###......." 3+13+3+7=26 ✓

Row 18: back foot cols 0-3, front foot cols 15-19 → "####" + 11 dots + "#####" + 6 dots = "####...........#####......" 4+11+5+6=26 ✓

So the GLIDE silhouette:

```
................####......
...............######.....
...............######.....
................####......
................##........
..............##..........
.........###.##...........
.........#####............
........######............
......########............
....###.#####.............
..###...#####.............
.##.....#####.............
........#####.............
......###..######.........
....###.......#####.......
..###...........###.......
###.............###.......
####...........#####......
```

Hmm, let me visualize it... The ball top right ✓, arm going down to body ✓, head... rows 6-7 cols 9-13 is a bit blobby merging with arm. Torso ✓, left arm trailing down-left ✓, legs split ✓. It's decent! The head could be more distinct but it's fine as a silhouette.

Actually wait, one issue: this is a silhouette, but real Jumpman has the ball clearly round and separated visually from body. Mine has ball rows 0-3, then gap at... row 3-4 transition: ball bottom cols 16-19 (row3), wrist cols 16-17 (row 4). There's no visual gap between ball and hand — that's fine, hand holds ball.

Maybe make the ball slightly bigger and rounder:
Row 0: cols 16-19 "####"
Row 1: cols 14-21 "########"? That's 8 wide. Let me do:
Row 0: cols 16-19
Row 1: cols 15-20
Row 2: cols 15-20
Row 3: cols 16-19
That's a nice octagon ball ✓ (as I had).

Now DUNK pose: MJ at the hoop, arm extended slamming ball down into rim. When dunking, body more vertical, dunking arm extended up-forward-down toward rim. For simplicity: the glide pose's ball-arm is up-BACK (cols 15-20 upper right is actually FORWARD since he faces right... 

Wait wait. He faces RIGHT (moving right toward hoop on right). Ball at upper-RIGHT (cols 15-20). So ball is in FRONT of him, up high, toward the hoop. That's actually great for dunking — tomahawk position! The arm just needs to come down at the hoop.

Hmm, but classic glide has ball back... whatever, ball-forward reads better for a dunk animation. Keep it.

DUNK frame: I'll make the arm bend down: ball at rim level, arm extended forward-down. Body still airborne, legs less split (coming down). Let me design dunk frame (26x19):

- Ball at cols 18-23, rows 4-7 (at rim height, pushed down into hoop area)
- Arm from shoulder (col 11, row 8) up-right to ball: rows 5-8 diagonal going right
- Head rows 6-8 cols 10-12
- Torso cols 9-13, rows 8-13
- Left arm trailing cols 2-7 row 11-12
- Legs: front leg bent up (knee forward), back leg trailing — can reuse similar legs but maybe more tucked

Dunk frame rows:
Row 0-3: empty (ball is lower now)
Row 4: ball top cols 19-22: "...................####...."
Row 5: ball cols 18-23 + arm col 15-17: "...............###.######.." hmm let me count: 15 dots + "###" (15-17) + 1 dot + "######" (19-24) + ... width: 15+3+1+6+1=26 ✓ → "...............###.######."
Hmm messy. Let me redo dunk frame cleanly.

DUNK frame (26x19):
- Ball: rows 4-7, cols 19-24 (top) — octagon: row4 cols 20-23, row5 cols 19-24, row6 cols 19-24, row7 cols 20-23
- Hand under ball: row 7-8, col 19-20
- Arm: diagonal from (19,7) to shoulder (12,9): row 7 col 19-20, row 8 cols 15-18, row 9 cols 12-14
- Head: rows 7-9, cols 10-12... wait shoulder at (12,9). Head should be left of arm: rows 6-8 cols 10-12.
- Torso: rows 9-13, cols 9-13
- Left arm: row 11 cols 4-8, row 12 cols 2-3
- Hips: row 13 cols 9-12
- Legs (tucked, coming down): back leg trailing left-down: row 14 cols 5-8, row 15 cols 3-4, row 16 cols 1-2, row 17 cols 0-2; front leg bent: thigh row 14 cols 11-16, knee row 15 cols 15-17, shin rows 16-17 cols 15-17, foot row 18 cols 14-18. Hmm but dunk happens up high, foot doesn't need row 18... keep consistent 19 rows for alignment.

Dunk rows:
Row 0: all dots
Row 1: all dots
Row 2: all dots
Row 3: all dots
Row 4: cols 20-23: "....................####.."
Row 5: cols 19-24: "...................######." 19+6+1=26 ✓
Row 6: cols 19-24: "...................######."
Row 7: cols 19-24 → wait octagon bottom: cols 20-23 + wrist col 18-19: cols 18-23: "..................######.." 18+6+2=26 ✓
Row 8: arm cols 15-17, head cols 10-12: "..........###..###........" 10+3+2+3+8=26 ✓
Row 9: shoulder cols 9-14: ".........######..........." 9+6+11=26 ✓
Row 10: torso cols 9-13: ".........#####............" 9+5+12=26 ✓
Row 11: torso cols 9-12 + left arm cols 4-7: "....####.####............." 4+4+1+4+13=26 ✓
Row 12: hips cols 9-12 + left hand cols 2-3: "..##.....####............." 2+2+5+4+13=26 ✓
Row 13: hips cols 9-12: ".........####............." 9+4+13=26 ✓
Row 14: back thigh cols 5-8, front thigh cols 11-16: ".....####..######........." 5+4+2+6+9=26 ✓
Row 15: back leg cols 3-4, front knee cols 15-17: "...##..........###........" 3+2+10+3+8=26 ✓
Row 16: back leg cols 1-2, shin cols 15-17: ".##............###........" 1+2+12+3+8=26 ✓
Row 17: back foot cols 0-2, shin cols 15-17: "###............###........" 3+12+3+8=26 ✓
Row 18: front foot cols 14-18: "..............#####......." 14+5+7=26 ✓

Dunk frame:
```
..........................
..........................
..........................
..........................
....................####..
...................######.
...................######.
..................######..
..........###..###........
.........######...........
.........#####............
....####.####.............
..##.....####.............
.........####.............
.....####..######.........
...##..........###........
.##............###........
###............###........
..............#####.......
```

Hmm, rows 17-18: back foot at cols 0-2 (row 17) then nothing row 18 left side — back foot floating. Fine, he's in the air.

Hmm, row 18 only front foot. OK.

Also a TAKEOFF/RUN frame for the dribble phase. Let me make a simple running silhouette:

RUN frame (26x19):
- Head: rows 5-7, cols 12-14
- Ball at hand low (dribbling): rows 12-14, cols 16-18? Dribble ball bounces — I can animate ball separately actually. Simpler: run frame without ball, ball rendered separately bouncing.
- Torso leaning forward: rows 7-11, cols 11-14
- Arms pumping: one forward one back
- Legs mid-stride

RUN rows:
Row 5: head cols 12-14: "............###..........."
Row 6: head cols 12-14: "............###..........."
Row 7: neck/shoulders cols 11-14: "...........####..........."
Row 8: chest cols 10-14 + arm forward cols 15-16: "..........#####.##........" 10+5+1+2+8=26 ✓
Row 9: torso cols 10-13: "..........####............"
Row 10: torso cols 10-13 + back arm cols 7-9: ".......###.####..........." 7+3+1+4+11=26 ✓
Row 11: hips cols 10-13: "..........####............"
Row 12: front thigh cols 12-16: "............#####........."
Row 13: front shin cols 14-16, back thigh cols 7-9: ".......###....###........."
Row 14: front foot cols 14-17, back leg cols 5-6: ".....##.......####........"
Row 15: back foot cols 3-5: "...##......................"

Hmm heights differ from glide frame — MJ's head at row 5 vs glide head at row 6. During animation I'll position the frames with their own offsets anyway, but consistent canvas size makes it easier. OK.

Also CROUCH frame (pre-jump) and LANDING frame. Maybe I can skip crouch, or reuse. Let me keep: RUN (with ball bouncing separately), GLIDE (long, the star), DUNK (at rim), LAND/CELEBRATE (optional: arms up). 

CELEBRATE frame: both arms up? Could reuse dunk frame minus ball. Let me do simple: after dunk, MJ descends with arms coming down; crowd goes wild; text flashes "AIR JORDAN". Keep it simple: fade MJ out, big text celebration, then loop.

Now the ball in glide frame is part of the silhouette (cols 15-20 rows 0-3). In dunk frame ball is part of it too (rows 4-7). For run frame, ball separate so it can bounce: draw ball as `(O)` orange or "##" block. I'll draw ball with same block style: 4x3 "##" block, colored orange, bouncing next to run frame.

Actually, simpler and cleaner: make the ball a separate element ALWAYS, and cut the ball out of the glide/dunk frames. Then I animate ball: bounce during run → attach to hand during glide → slam down during dunk → bounce off rim/floor after dunk → reset. That's more dynamic!

But then hand-without-ball in glide... the frames would have an empty hand. With block silhouette, hand under ball area... it might look like missing chunk. Hmm. Given the ball in glide is at the arm's end (cols 15-20, rows 0-3) with wrist row 4 cols 16-17, removing ball leaves wrist pointing up — looks like empty hand reaching up. That's actually fine!

Let me restructure frames WITHOUT ball:
- GLIDE: remove rows 0-3 ball → but then canvas height shrinks... keep rows for alignment, just empty. Wrist row 4 cols 16-17 stays.
- DUNK: remove ball rows 4-7 top; keep wrist/hand rows 7-8.

And BALL element: orange, like:
```
 ####
######
######
 ####
```
matching the silhouette ball size (6 wide, 4 tall).

Animation timeline (using JS):
Phase 0 (0-1.5s): MJ RUN enters from left, dribbling (ball bouncing beside him), moving right along ground.
Phase 1 (1.5-1.8s): switch to GLIDE at takeoff point; ball jumps to his hand.
Phase 2 (1.8-3.2s): GLIDE along parabola toward hoop — slow, majestic. Maybe slight rotation? Rotation of ASCII art via CSS transform rotate a few degrees could look cool!
Phase 3 (3.2-3.5s): at rim → DUNK frame, ball slams into hoop, net animation, screen shake, flash, "SLAM!" particles.
Phase 4 (3.5-5s): ball bounces down/off, MJ fades or drops down out of frame, crowd bounces, "AIR JORDAN" big text flashes.
Loop.

The hoop: draw backboard + rim + net on right side:
```
|
|
|_____
|     |
|=====|   <- backboard edge
   ___
  |   |    <- rim
  \   /
  |\ /|
  | X |    <- net
  |\ /|
   \_/    
```

Let me design hoop (about 10 wide, 12 tall), positioned upper right:
```
|||||||||||
|||||||||||
|||||||||||
|||||||||||
|||       
|||  ___  
||| |___|  <- rim
|||  \_/   
|||  | |   
|||  |X|   <- net
|||  | |   
|||   V    
```

Better:
```
██████████
██████████
██
██
██    _____
██   |_____|     <- rim (front view: ellipse-ish)
██   |     |
██    \   /
██    |\ /|
██    | X |
██    |/ \|
██     \_/
```

Hmm, side view is more natural for a dunk animation. Side view hoop:
```
██████
██████
██
██
██  ___
██ |   |___
██  \_____/   <- rim side view? 
```

Side view: backboard vertical bar, rim sticking right as a small ellipse/trapezoid, net below as tapered mesh:
```
█
█
█
█  ___
█ |___|      <- rim
█  |   |
█  |\ /|     <- net
█  | X |
█  |/ \|
█   \_/      <- net bottom
```

With backboard tall:
```
██
██
██
██
██ ___
██|___|
██ | |
██ |\|
██ | |
██  V
```

I'll polish in code. Net animation on dunk: net sways (2 frames alternating).

Crowd at bottom: rows of little faces that bounce:
```
 o O o o O o o O o o O o
/|\/|\/|\...
```
Make crowd: `\(o)/` style cheering figures, alternate offsets for wave effect, bounce via JS/CSS.

Scoreboard text top: "CHICAGO 23" etc.

Layout plan (HTML):
- Container: black bg, monospace, centered
- Scoreboard bar (red): "🏀 AIR JORDAN — THE DUNK 🏀" or ASCII title
- Scene area (relative positioned, fixed height): 
  - hoop (absolute, right side, orange/white)
  - MJ (absolute pre, red #CE1141, will be transformed by JS)
  - ball (absolute pre, orange)
  - effects layer (particles text)
  - "AIR JORDAN" flash text (hidden, absolute center)
- Court floor line
- Crowd (bottom, 2 rows, bouncing)
- Status line: phase text like "He takes off from the free throw line..." changing per phase — nice touch! Famous call quotes: "He's on fire!", "I believe I can fly" hmm copyrighted lyrics — avoid. Use public domain-ish quotes? MJ quotes are fine as short quotes? "I can accept failure, everyone fails at something. But I can't accept not trying." — Michael Jordan. Short quotes attributed are OK. Or keep simple crowd noise "CROWD GOES WILD". I'll use short attributed MJ quotes rotated in footer — that's fine.

Physics: parabola from takeoff x0 to rim x1 with peak height. Parametric t in [0,1]: x = lerp, y = ground - 4*h*t*(1-t)... y = peak*sin? y_offset = -peakHeight * (4*t*(1-t))... at t=0.5 max. Good.

Rotation: rotate MJ slightly: at takeoff rotate -5°... during glide rotate to like -10° (leaning forward?) hmm with facing right and rising, rotate slightly counterclockwise (nose up) then clockwise at descent. CSS transform rotate on the pre element. Subtle: -8° at start of glide, 0 mid, +10° at dunk.

Wait, but the GLIDE frame is already posed. Slight rotation adds life. Also add slight bobbing (scale 1 → 1.05).

Screen shake: on dunk, add class to scene: keyframes translate random small amounts 300ms.

Flash: white/red overlay quick fade on dunk.

Particles on dunk: spawn 10-15 spans with chars (*, ✦, ., ', `) at rim position, animate falling with random vx, fade out. In monospace ASCII vibe, use chars: * . ' ` + °

Net animation: two net frames alternating 150ms for ~1s after dunk.

Crowd bounce: CSS animation with per-character delay? Simpler: two crowd rows, JS toggles translateY of each char with sine wave — do it in JS with spans per char, offset = sin(time + i). 

Sound: no (autoplay issues, keep silent).

Title: ASCII art title? "AIR JORDAN" in big ASCII letters during celebration. Let me make big text:

```
      #      ### ######         #  ####  ######  #####      #    #    #
     # #      #   #     #       # #    # #     # #    #    # #   ##   #
    #   #     #   #     #       # #    # #     # #    #   #   #  # #  #
   #     #    #   ######        # #    # ######  #    #  #     # #  # #
   #######    #   #   #   #     # #    # #   #   #    #  ####### #   ##
   #     #    #   #    #  #     # #    # #    #  #    #  #     # #    #
   #     #   ###  #     #  #####   ####  #     # #####   #     # #    #
```

That's "AIR JORDAN" — let me verify letters: A I R (space) J O R D A N. My sketch above may be off. I'll write a simpler approach: use a FIGlet-like font? No external deps ideally... Actually I could just hardcode big letters. Let me hardcode "AIR JORDAN" using a small banner font I design (5 rows tall):

A: 
```
  #  
 # # 
##### 
#   # 
#   # 
```
I:
```
### 
 #  
 #  
 #  
### 
```
R:
```
####  
#   # 
####  
# #   
#  #  
```
Hmm 5 rows:
R:
```
###  
#  # 
###  
# #  
#  # 
```
J:
```
  ### 
    # 
    # 
#   # 
 ###  
```
O:
```
 ###  
#   # 
#   # 
#   # 
 ###  
```
D:
```
###  
#  # 
#  # 
#  # 
###  
```
N:
```
#   # 
##  # 
# # # 
#  ## 
#   # 
```

Let me compose "AIR JORDAN" (5 rows):
Row1: `  #   ###  ###         ###   ###  ###   ###     #   #   #`
Getting complicated; maybe simpler: flash plain large text "AIR JORDAN" in big font-size with letter-spacing, styled red with glow. In an ASCII-art aesthetic, big monospace text is fine. I'll do a hybrid: during celebration, show a big ASCII banner I craft carefully OR large glowing text. Let me craft the banner — more in the ASCII spirit. I'll build it in code as array of 5 strings.

Font (5 rows tall, per letter):

A:
```
 ## 
#  #
####
#  #
#  #
```
I:
```
###
 # 
 # 
 # 
###
```
R:
```
### 
#  #
### 
# # 
#  #
```
J:
```
  ##
   #
   #
#  #
 ## 
```
O:
```
 ## 
#  #
#  #
#  #
 ## 
```
D:
```
### 
#  #
#  #
#  #
### 
```
N:
```
#  #
## #
# ##
# ##
#  #
```
Hmm N: 
```
#  #
## #
# ##
#  #
#  #
```
Let me define:
N rows: "#  #", "## #", "# ##", "#  #", "#  #" — diagonal: row1: ##? eh close enough.

"AIR JORDAN" = A I R space J O R D A N

Row 0: A:` ## ` I:`###` R:`### ` sp J:`  ##` O:` ## ` R:`### ` D:`### ` A:` ## ` N:`#  #`
=> " ##  ### ###       ##  ##  ### ###  ##  #  #"

Let me carefully concatenate with 2-space separators:

A:    " ## ", "#  #", "####", "#  #", "#  #"
I:    "###", " # ", " # ", " # ", "###"
R:    "### ", "#  #", "### ", "# # ", "#  #"
J:    "  ##", "   #", "   #", "#  #", " ## "
O:    " ## ", "#  #", "#  #", "#  #", " ## "
D:    "### ", "#  #", "#  #", "#  #", "### "
N:    "#  #", "## #", "# ##", "#  #", "#  #"

"AIR JORDAN":
Row0: " ## " + " " + "###" + " " + "### " + "   " + "  ##" + " " + " ## " + " " + "### " + " " + "### " + " " + " ## " + " " + "#  #"
= " ##  ### ###     ##  ##  ###  ###  ##  #  #"

Hmm spacing inconsistent (4-wide vs 3-wide letters). Fine, I'll assemble in code from a letters object — cleaner! I'll define font map and generate. 

Also "23" on... maybe put #23 on his chest? Can't easily on silhouette. The title bar can show "MJ #23".

Status line per phase:
- Run: "MJ takes the ball up the court..."
- Glide: "He takes off from the free-throw line!"  (iconic 1988 dunk contest)
- Dunk: "SLAM DUNK!!"
- Celebrate: "The crowd goes wild! 🏀" — avoid emoji? emoji ok but keep ASCII: "The crowd goes wild!"

Colors:
- Background: #0a0a0f (near black) or pure black with subtle scanlines? Add subtle CRT scanline overlay for retro vibe (repeating-linear-gradient). 
- MJ: #CE1141 (Bulls red) with slight text-shadow glow
- Ball: #ff8c1a orange
- Hoop/backboard: #ddd, rim #ff4444? rim usually orange/red: #ff5722
- Crowd: muted colors, maybe cycle colors
- Floor: #8b5a2b brownish line? or gray
- Title: red/white

Font: 'Courier New', monospace. Use  for frames.

Implementation details:

HTML structure:
```html

  ★ AIR JORDAN ★ FREE-THROW LINE DUNK ★ 1988 ★
  
    
    
    
    
    
    
    
    ...
  
  
  ...

```

MJ positioning: absolute, bottom-based. I'll compute x,y in px. Character size: with font-size 14px, line-height 14px, char width ≈ 8.4px. Scene width ~ 640px.

Hmm, frames are 26 cols × 19 rows. At 14px font, char w = 14*0.6 = 8.4px → frame w ≈ 218px, h ≈ 266px. That's big; scene maybe 700x420. Let's set scene 720x430. Rim at right: x ≈ 620, y ≈ 120 (rim center). MJ glide end: his ball-hand must reach rim. In glide frame, hand at row 4 col 16-17 → offset from frame top-left: (16.5*8.4, 4.5*14) ≈ (139, 63). So mj.x = rimX - 139, mj.y = rimY - 63 at dunk moment. I'll compute via constants; simpler: eyeball with JS constants and tweak.

Actually, to reduce fiddliness: I'll define positions in CHARACTER units and set left/top via ch units (use `ch` unit? line-height in em). CSS: mj { left: calc(var(--x) * 1ch) }? Can't easily multiply var by ch in calc — yes you can: calc(var(--x) * 1ch) works since --x is a number. Nice: set font mono, use ch and em(lh) units. I'll define line-height = 1em? For pre, set line-height: 1. char height = 1em = font-size. So top: calc(var(--y) * 1em) where y in rows.

So everything in grid units: scene 80 cols × 30 rows? Frame 26 wide. Scene width 80ch = 80*8.4 = 672px at 14px font. 

Scene grid: 80 cols × 28 rows (28em height = 392px). Floor at row 24. Crowd rows 25-27. Hoop: backboard col 70-71 rows 6-17? Let me place: backboard at col 71, rows 6-16; rim at cols 71-73? Side view rim sticks LEFT from backboard toward incoming MJ: rim at cols 68-70, row 12. Net below rim rows 13-16 cols 68-70.

Hoop drawing (side view, MJ comes from left):
```
col:        68 69 70 71 72
row 11:                  ██   <- backboard bottom edge? 
```
Let me draw hoop as its own pre (10 cols × 12 rows), positioned at grid col 66, row 5:

```
.....██
.....██
.....██
.....██
.....██
.....██
.....██
..___██
.|___|█      <- rim
..| |
..|X|
..| |
..\_/
```

Hmm rim side view: rim is a ring seen from side → draw as `|___|` hmm. Classic side-view ASCII hoop:

```
|
|
|====
|    |
 \  /
 |  |
 |\/|
 |/\|
  \/
```

Let me make (8 wide × 11 tall):
```
      ##
      ##
      ##
      ##
      ##
  ____##
 |____|#   <- wait
```

I'll do:
```
.......██
.......██
.......██
.......██
.......██
.......██
..____.██
.|    |██
.|____|██
..\  /
..|\/|
..|/\|
...\/ 
```

The rim: front edge at left (cols 2-6?), backboard col 8-9. Rim as seen from side: rectangle `____` top and `|____|` hmm honestly:

```
row: .......██
     .......██
     .......██
     ..____██     <- rim top edge meets backboard
     .|____|█     <- rim
     .\    /      <- net
     .|\  /|
     .| \/ |
     .| /\ |
     ..\__/ 
```

Wait rim attaches to backboard: rim is horizontal ring from side: looks like a thin rect from backboard extending left: 

```
.......██
.._____██    <- rim (thin)
|_____|██    
 \   /       <- net
 |\ /|
 | X |
 |/ \|
  \_/ 
```

Rim circle front lip at far left col 0. Ball dunks through from above at cols 1-5ish. Ball is 6 wide × 4 tall — wider than rim 5 wide. Hmm scale mismatch: ball should fit through rim. Make rim wider (cols 0-7, 8 wide) and net taper. Ball 6 wide fits in 8-wide rim ✓.

Hoop pre (10 cols × 13 rows):
```
row0: ........██
row1: ........██
row2: ........██
row3: ........██
row4: ........██
row5: ........██
row6: .______███    <- rim extends left from board
row7: |______|██
row8: .\____/.
row9: .\    /.
row10: .\  /.
row11: .\/.
```
Hmm net too fast taper. Let me do net rows 8-12:
```
row8:  \    /
row9:  |\  /|
row10: | \/ |
row11: | /\ |
row12:  \__/
```
And rim:
```
row6: ________.██     (rim top thin line cols 0-7)
row7: |______|.██     (rim bottom / ring)
```
Ball passes through at cols 1-6 rows... ball enters between row 7 and row 8 region. At dunk moment, ball overlaps rim row 6-9, net frames animate (net frame B: shifted pattern) then ball continues down through net and falls.

Net frame A:
```
\    /
|\  /|
| \/ |
| /\ |
\__/ 
```
Net frame B (sway right):
```
 \    /
 |\  /|
 | \/ |
 | /\ |
  \__/
```
Just shift. Fine.

Backboard: make it a taller rect, cols 8-9 rows 0-7, and maybe a square target:
```
row0: ........██
row1: ........██
row2: ........██
row3: ........██
row4: ........██
row5: ........██
```
Maybe add pole below: rows 13+ at col 9? The floor is at row 24. Backboard rows 0-7, rim rows 6-7 at cols 0-7, net rows 8-12, pole col 9 rows 13-24. OK:

hoop art rows (10 wide):
```
row0:  ........██
row1:  ........██
row2:  ........██
row3:  ........██
row4:  ........██
row5:  ........██
row6:  ________██
row7:  |______|█
row8:  .\    /.
row9:  .|\  /|.
row10: .| \/ |.
row11: .| /\ |.
row12: ..\__/..
row13: ........██
```
Position hoop pre at grid col 64, row 3. Then rim occupies cols 64-71, rows 9-10 (3+6=9, 3+7=10). Rim center x ≈ col 68, rim row ≈ 9.5. Ball target: ball's 4 rows should sit at rows 7.5-11ish, centered col 65-70 (ball 6 wide: cols 65-70, center 67.5 vs rim inner cols 65-70 (rim outer 64-71, inner 65-70 ✓)). 

So BALL_DUNK position: x = 65ch, y = 6.5em (ball rows 6.5-10.5, overlapping rim rows 9-10, then falls through).

Hmm wait, rim at rows 9-10 means rim height in scene = rows 9-10. MJ glide hand must meet ball at rows ~6-7 near rim. In glide frame, hand at row 4 (wrist) rows... hand is row 4 col 16-17 (top of frame). Ball sits ON hand: ball bottom = row 4, ball rows 0-3 cols 15-20. So MJ frame top y = ball_y. At dunk: ball top row 6.5 → MJ frame y = 6.5em, hand at y=10.5em=rim row ✓. MJ frame x: ball cols 15-20 centered 17.5 → ball x 65 → mj.x = 65 - 15 = 50ch. Frame left col 50, hand col 50+16=66 ✓ near rim inner ✓. 

So dunk position: MJ at (50ch, 6.5em). Glide parabola from takeoff (x=12ch, ground) to (50ch, 6.5em). Ground: MJ feet at floor row 24 → frame 19 rows → frame y = 24-19 = 5em when standing?? Frame rows 0-18, feet at row 18 → frame top y = 24 - 18 = 6em standing. But dunk y = 6.5em — barely higher than standing?! Because rim at row 9.5 and MJ is 19 tall, his hand at row 4 → hand at 6.5+4 = 10.5 = rim ✓ but his feet at 6.5+18=24.5 — ON the floor. That means at the dunk he's basically standing. That's wrong — he should be AIRBORNE at dunk, feet off ground.

Fix: rim higher. Real proportions: MJ ~19 rows tall (~2m), rim 3.05m ≈ 1.5× his height ≈ rows... if MJ 19 rows = 1.98m → rim 3.05m ≈ 29 rows. Scene only 28 rows — rim would be above scene top when he's under it. Scale problem: ASCII court can't be to scale vertically. Solution: foreshorten — it's fine for the dunk to happen with feet ~6-8 rows off ground. Raise rim to row 6: rim rows 6-7, net 7-11. Ball at dunk: rows 3.5-7.5, MJ frame y=3.5em, feet at 21.5 → 2.5 rows off floor. Meh, better. Rim row 5: MJ y=2.5, feet row 20.5, ~3.5 rows air. Rim row 4: feet 19.5 → 4.5 rows air. 

Let's set: hoop pre at (64ch, 0em)? Scene rows 0-27; backboard from row 0. Rim rows 6-7 (rim row 6.5). Ball dunk rows 3-7 → MJ glide frame y at dunk = 3em, feet row 21, 3 rows above floor (row 24). Takeoff: feet leave floor row 24. Peak glide: feet around row 19-21. It'll read fine with rotation and motion. 

Actually also crowd rows 25-27 below floor row 24 — crowd BELOW floor looks odd; usually crowd is behind/above floor line. Alternative: floor line at row 26, crowd beyond (rows 25-27 are behind floor, drawn above floor line visually?). Simplest: put crowd at the very bottom as "audience in stands" beneath the court view — like a ticker. Or put the floor at bottom (row 26-27) and crowd as a separate strip below the scene entirely (outside scene div). I'll do: scene = play area; below scene, a crowd strip (2 rows) with its own border, like "stands". That reads fine.

Floor: a horizontal line across scene at row 24: `════════...` or `________`. MJ shadow? A shadow ellipse under him that scales with height — nice touch: pre with `____` or `o` scaled. Skip or simple: a text shadow element `▂▂▂` under MJ moving with him, opacity varying. I'll add simple shadow: element with text "__________" width scaled... eh, keep a simple ellipse of underscores/periods, scale via transform scaleX. Nice detail, cheap. Let me include: shadow pre: `......` (6 dots) or `____`, positioned at floor, x follows MJ center, scaleX = 1 - 0.4*heightRatio.

Free-throw line marker: at takeoff x, draw `|` mark on floor? Cute: draw court line at x=12: floor with a gap/mark. Eh, add "|" at col 12 in floor string.

Ball trajectory phases:
- Dribble: ball bounces: y = ground - |sin| bounce between hand height and floor. Ball ground = floor row 24, ball 4 tall → rest y=20. Dribble from y≈14 (hand) to 20. During run, hand col relative to run frame... run frame has no ball; ball at MJ front (x = mj.x + 16ch) bouncing. 
- Glide: ball attached at frame col 15, row 0 relative → ball x = mj.x+15ch, ball y = mj.y (ball occupies rows 0-3 of frame area) — since frame includes empty rows 0-3 where ball was. ✓ So ball tracks MJ directly.
- Dunk: ball detaches, slams from hand position down through rim: quick move to (65ch, 6.5em→ then through net to row 12, then bounce on floor, roll/bounce away right, fade.
- Reset.

MJ glide frames: just ONE glide frame + rotation/bob; dunk frame at end; run frame during dribble; maybe add a second run frame (legs alternate) for running animation — flip run frame horizontally? Running stride frames would be nice: 2 frames toggling every 150ms. I'll create RUN2 (legs switched). Cheap: mirror RUN legs... let me just design RUN2 quickly.

RUN frame A (26x19) — designed above; let me refine it into final strings:

```
row0-4: empty
row5:  ............###...........
row6:  ............###...........
row7:  ...........#####..........
row8:  ......##..######..##......   <- back arm + chest + front arm
row9:  .....##..######..##.......
row10: .....#############........   <- hmm
```

Let me do simpler run silhouette:
- Head rows 4-6 cols 13-15
- Torso rows 7-11 cols 12-15 (leaning right)
- Front arm rows 8-9 cols 16-18 (pumping forward-down)
- Back arm rows 8-9 cols 9-11
- Front leg: thigh row 12 cols 13-16, shin rows 13-14 cols 16-18, foot row 15 cols 16-19
- Back leg: thigh row 12 cols 10-12, shin rows 13-14 cols 8-9, foot row 15 cols 6-9

RUN A rows (26 wide):
row4:  ".............###.........." (cols 13-15) 13+3+10=26 ✓
row5:  same
row6:  "............#####........" (cols 12-16) head/neck? keep head rows 4-6: row6 cols 13-15 same
row7:  "............#####........" shoulders cols 12-16? shoulders wider: cols 11-16: "...........######........." 11+6+9=26 ✓
row8:  front arm cols 16-18 + torso cols 11-15 + back arm cols 8-10: "........###.#####.###....." 8+3+1+5+1+3+5=26 ✓ hmm gap between arm and torso — arms should connect. cols 8-18 all fill? Arms angled: back arm cols 8-10 row 8, row 9 cols 9-10; front arm row 8 cols 16-18, row 9 cols 16-17.
row8:  cols 8-10, 11-16(torso), 17-18?? front arm connects at shoulder col 16. Let me: row8: back arm cols 8-10, torso cols 11-16, front arm cols 17-18 → "........#############.##.." no—just fill cols 8-18 minus nothing: "........###########......." (cols 8-18, 11 chars) 8+11+7=26 ✓. Simpler: one blob row8 cols 8-18.
row9:  torso cols 11-15, back forearm cols 9-10, front forearm cols 17-18: ".........##.#####..##....." 9+2+1+5+2+2+5=26 ✓
row10: torso cols 11-15: "...........#####.........." 11+5+10=26 ✓
row11: hips cols 11-15: same "...........#####.........."
row12: front thigh cols 13-17, back thigh cols 10-12: "..........###..#####......" 10+3+2+5+6=26 ✓
row13: back shin cols 8-9, front shin cols 16-18: "........##......###......." 8+2+6+3+7=26 ✓
row14: back shin cols 7-8, front foot cols 16-19: ".......##.......####......." 7+2+7+4+6=26 ✓
row15: back foot cols 5-8: ".....####.................." 5+4+17=26 ✓

RUN A:
```
..........................
..........................
..........................
..........................
.............###..........
.............###..........
.............###..........
...........######.........
........###########.......
.........##.#####..##.....
...........#####..........
...........#####..........
..........###..#####......
........##......###.......
.......##.......####......
.....####.................
..........................
..........................
..........................
```

RUN B (legs opposite):
row12: front thigh cols 13-16 bent up? For stride: front leg forward bent, back leg trailing — mirrored-ish:
row12: thighs cols 10-16: "..........#######........."
row13: back shin cols 7-8, front shin cols 17-18: ".......##........##......."
row14: back foot cols 4-6, front foot cols 17-20: "....###...........####...."
row15: front foot cols 17-20 only touching: hmm both feet off ground (running airborne phase) fine.

RUN B:
```
..........................
...(same top)...
.............###..........
.............###..........
.............###..........
...........######.........
........###########.......
.........##.#####..##.....
...........#####..........
...........#####..........
..........#######.........
.......##........##.......
....###...........####....
..........................
..........................
..........................
..........................
..........................
..........................
```

Toggle A/B every 160ms during run ✓.

LAND frame: after dunk, MJ falls... could just reuse glide frame rotated, then fade. Keep simple: after dunk, MJ (dunk frame) drops down fast with fade out. Then banner.

Now GLIDE frame final (26x19) without ball (ball separate): remove rows 0-3 ball, keep wrist row 4:

```
row0:  ..........................
row1:  ..........................
row2:  ..........................
row3:  ..........................
row4:  ................##........   <- hand reaching up
row5:  ..............##..........
row6:  .........###.##...........
row7:  .........#####............
row8:  ........######............
row9:  ......########............
row10: ....###.#####.............
row11: ..###...#####.............
row12: .##.....#####.............
row13: ........#####.............
row14: ......###..######.........
row15: ....###.......#####.......
row16: ..###...........###.......
row17: ###.............###.......
row18: ####...........#####......
```

Hand at row 4 cols 16-17: ball should sit right on it: ball bottom row 3-4, ball occupies rows 0-3, cols 15-20 ✓ (as originally). Ball element positioned at mj.x+15ch, mj.y+0em — since ball rows 0-3 correspond to frame rows 0-3 ✓.

But wait: hand pointing up with ball ABOVE hand at rows 0-3 — during glide ball is at frame rows 0-3 ✓ consistent with earlier plan. 

DUNK frame without ball:
```
row0-3: empty
row4:  ..........................  (ball was rows 4-7)
row5:  ..........................
row6:  ..........................
row7:  ..................##......  <- hand pushing down (cols 18-19)
row8:  ..........###..###........  <- head + arm
row9:  .........######...........
row10: .........#####............
row11: ....####.####.............
row12: ..##.....####.............
row13: .........####.............
row14: .....####..######.........
row15: ...##..........###........
row16: .##............###........
row17: ###............###........
row18: ..............#####.......
```

Hmm dunk arm: hand at row 7 cols 18-19, arm row 8 cols 15-17 (the "###..###" second ### is arm cols 15-17), shoulder row 9. Ball at dunk sits below hand: ball rows 7.5-11.5ish at cols 15-21ish. Rim at rows 6-7 (cols 64-71 scene). Scene mapping: dunk frame at scene pos (x_d, y_d): hand scene col = x_d+18, row = y_d+7. Hand should be at rim: rim center col ≈ 67.5 (rim cols 64-71, inner 65-70), rim row 6.5. Hand AT rim pushing ball through: hand at (67.5, ~7). So x_d = 67.5-18 ≈ 49.5 → 49ch; y_d = 7-7 = 0em?? Then ball under hand: ball top row 7 → ball y = y_d + 7 - something...

Hold on, in dunk frame ball was rows 4-7 originally (I said ball rows 4-7, hand row 7-8 under ball — pushing DOWN means hand is ABOVE ball? No! When dunking, hand is above/behind ball pushing it down through rim. Ball at rim level (rows 6-8), hand above ball (rows 5-6). Let me redo dunk frame geometry:

- Ball passes through rim: ball occupies rows 5-8 (4 tall), cols 15-20 at rim.
- Hand on TOP of ball: row 4-5, cols 17-18.
- Arm from hand up-left-back to shoulder: rows 4-9... wait arm comes from shoulder (up-left) down to ball? At dunk, arm fully extended up-forward: shoulder row 9, arm extended up-right to hand row 4. Yes! Arm diagonal from (12,9) to (17,4).
- Head rows 7-9 cols 9-11.

DUNK frame v2:
row4:  hand cols 16-18: "................###..........."
row5:  arm cols 15-16 + ball top cols 17-22?? Ball 6 wide needs cols 15-20... conflict with arm. Ball at cols 16-21 rows 5-8; arm at cols 14-15 row 5. Hand row 4 cols 17-18 (on ball top).

Hmm wait — MJ approaches from LEFT, rim to his right. His arm extended forward-right, hand above ball, ball at rim. In frame coords: ball cols 16-21, rows 5-8; hand row 4-5 cols 17-19; arm diagonal rows 5-8 from (14,8) to (17,5); head rows 7-9 cols 9-11; torso rows 9-13 cols 9-13; legs as before.

row4:  hand cols 17-18: ".................##..........."
row5:  arm cols 15-16, ball cols 17-22: "...............########......." 15+8+3=26 ✓ → cols 15-22 all "#": "...............########......."
row6:  arm col 14, ball cols 16-21: "..............#.######........" 14+1+1+6+4=26 ✓
row7:  arm cols 13-14 + head cols 9-11, ball cols 16-21: ".........###.##.######........" 9+3+1+2+1+6+4=26 ✓
row8:  shoulder cols 11-13, head cols 9-11 → cols 9-13, ball cols 16-21: ".........#####..######........" 9+5+2+6+4=26 ✓
row9:  torso cols 9-13: ".........#####................" 9+5+12=26 ✓
row10: torso cols 9-13: ".........#####................"
row11: torso cols 9-12 + left arm cols 4-7: "....####.####................."
row12: hips cols 9-12 + left hand cols 2-3: "..##.....####................."
row13: hips cols 9-12: ".........####................."
row14: back thigh cols 5-8, front thigh cols 11-16: ".....####..######............."
row15: back leg cols 3-4, knee cols 15-17: "...##..........###............"
row16: back leg cols 1-2, shin cols 15-17: ".##............###............"
row17: back foot cols 0-2, shin cols 15-17: "###............###............"
row18: front foot cols 14-18: "..............#####..........."

DUNK frame:
```
..........................
..........................
..........................
..........................
.................##.......
...............########...
..............#.######....
.........###.##.######....
.........#####..######....
.........#####............
.........#####............
....####.####.............
..##.....####.............
.........####.............
.....####..######.........
...##..........###........
.##............###........
###............###........
..............#####.......
```

Ball included in this frame (rows 5-8) — since ball ends INSIDE rim/net region during dunk, keep ball in dunk frame, then the separate BALL element takes over from below rim for the bounce-away. Actually simpler: keep ball IN the dunk frame; on phase transition to "bounce", hide frame ball? Can't hide part of frame. Alternative: dunk frame WITHOUT ball; separate ball animates into rim at dunk moment (it's already tracking MJ's hand region...).

Where's the separate ball during glide? At frame rows 0-3 cols 15-20 (hand up-back... wait GLIDE has ball up-FORWARD rows 0-3). At dunk, ball must travel from up-forward (frame rows 0-3) DOWN to rim (frame rows 5-8). Quick animation: ball moves from (mj+15ch, mj+0em) to (mj+16ch, mj+5em) in ~150ms while frame switches glide→dunk. That reads as the slam! ✓ Then ball continues: through net (y+9em), fall to floor (row 20em → floor 24 minus ball 4 = 20em), bounce once or twice rolling right, stop. 

So DUNK frame v3 (no ball, hand open above rim):
row4: hand cols 17-19 (wider, slapping down): ".................###..........."
row5: arm cols 15-16: "...............##.............."
row6: arm col 14-15: "..............##..............."
row7: arm cols 13-14 + head cols 9-11: ".........###.##................"
row8: cols 9-13: ".........#####................."
row9-18: same as v2.

Ball at dunk: frame coords rows 5-8, cols 16-21 → scene: x = x_d+16, y = y_d+5.
Rim inner cols 65-70 scene (6 wide ✓ ball 6 wide), ball at rim: x_d+16 = 65 → x_d = 49ch ✓ (matches earlier calc). Ball y at rim: rim row 6.5 → ball center row 7 → ball y = 5em → y_d = 0em?? y_d + 5 = 5 → y_d = 0. Hmm earlier glide calc: glide ball rows 0-3 at rim rows... wait for the GLIDE-to-DUNK approach, MJ flies and at end of glide his HAND reaches rim. Glide hand at frame row 4 (cols 16-17), ball rows 0-3. Ball bottom row 3-4 at rim row 6.5: y_d + 3.5 = 6.5 → y_d = 3em. Then dunk frame y_d' = 0em?? MJ frame JUMPS UP 3em between glide-end and dunk — noticeable pop. Hmm.

Better: make glide-end and dunk same y_d. Set y_d = 0? Then glide hand (row 4) at row 4+0=4, ball rows 0-3 at rows 0-3 — ball ABOVE rim (rim 6.5)?? At dunk the ball slams DOWN from row ~2 to row ~5-8. Fine actually! The motion: glide in with ball cocked high, then SLAM down into rim. The y_d stays 0... but wait, then during glide approach, y goes from takeoff (feet ground, frame y=6em) rising to y=0em? Only 6em rise — and feet at frame row 18 → feet at row 18 when y_d=0, floor row 24 → 6 rows off ground at dunk. 

Hmm wait, I previously wanted rim row 6.5 and glide y_d = 3 (hand row 4 at 7 ≈ rim 6.5 ✓ ball bottom row 3+3=6 just above rim 6 ✓). And dunk frame: hand row 4-5 at y_d'+4.5 ≈ 6.5 → y_d' = 2em. Ball during dunk (frame rows 5-8) at rows 7-10: through rim (6.5) into net (7-11) ✓✓. So y_d' = 2, glide end y_d = 3 — only 1em difference, and ball slams from rows 3-6 to rows 7-10. The 1em frame shift = MJ thrusting down slightly = natural dunk motion! ✓

FINAL GEOMETRY:
- Scene: 80ch × 28em? Floor at row 24 → scene height 24em + crowd strip below separate. Let me say scene height 24.5em, floor line at row 24 (bottom).
- Hoop pre at (64ch, 0em), 10 wide, 14 tall rows 0-13 (backboard rows 0-7? my hoop art rows 0-13 with rim rows 6-7, net 8-12, pole row 13). Hmm backboard only rows 0-5 above rim — backboard should extend above rim more: rows 0-5 = 6 rows ✓ fine, and pole below net rows 13-24 to floor. Let me extend hoop art: add pole rows 13-24 col 8-9: "........██" repeated. Pole at col 8-9 → scene cols 72-73. Rim at scene cols 64-71, rows 6-7; inner opening cols 65-70.

Wait, hoop pre rows: row6 rim top `________██`? Let me rewrite hoop art (10 cols):

```
row0:  ........██
row1:  ........██
row2:  ........██
row3:  ........██
row4:  ........██
row5:  ........██
row6:  ________|█
row7:  |______|█
row8:  .\    /.
row9:  .|\  /|.
row10: .| \/ |.
row11: .| /\ |.
row12: ..\__/..
row13: ........██
...(pole rows 14-23): ........██
```

Hmm rim: row6 `________` + backboard. row7 `|______|` + board. Rim ring side view: top edge row6 cols 0-7, front lip col 0 row 7, attaches at col 7-8 to board. Ball enters rows between: inner opening cols 1-6 (6 wide) rows 7+. Ball 6 wide → x at cols 1-6 of hoop = scene 65-70 ✓ (inner cols 65-70 ✓).

Backboard could be prettier with target square:
```
row2:  ........██
row3:  ........██  -> keep plain, add glow color
```
Fine, add color: backboard #ccc, rim #ff5722, net #eee, pole #888. Single pre → single color... I can layer: use one pre per part, or color via multiple spans. Simpler: two pre's: "board+pole" (gray) and "rim+net" (orange/white). Or just make whole hoop light gray with rim chars in same color — acceptable. Actually let me do 2 pre's: backboardPole (white/gray #bbb) and rimNet (rim orange + net white — mixed...) — meh. Alternative: build hoop as HTML spans with classes per line segment. Overkill. Decision: ONE pre, color #e8e8e8, and rim rows I'll color separately with an absolutely positioned small pre `________\n|______|` in orange #ff6d00 overlapping. Two pre's, easy. ✓

Net sway: net rows in rimNet pre; alternate net pattern on dunk: frame A rows 8-12 as above; frame B shifted 1 right:
```
row8:  ..\    /
row9:  ..|\  /|
row10: ..| \/ |
row11: ..| /\ |
row12: ...\__/
```
Toggle 120ms ×8 then back. ✓

Crowd: strip below scene: 3 rows of chars like:
```
 o  o O o  o O  o o  O o  o O o  o O o o  O o o O  o
/|\/|\/|\|/|\/|\|/|\/|\/|\/|\|/|\/|\/|\|/|\/|\/|\/|\
/ \/ \/  / \/  \/  \/  \/  / \/  \/  \/  / \/  \/  \
```
Per-char bounce: JS sets transform translateY on each char span with sin(time*speed + i*phase) → wave. During dunk: bigger amplitude + colors flash. Also arms up on excitement? Keep heads+arms static chars, bounce only. Maybe switch crowd chars on dunk to `\o/` style — could swap row pattern when excited. Nice: two crowd patterns (calm / wild), toggle at dunk. 

Scoreboard top: 
```
┌──────────────────────────────────────────────┐
│ CHICAGO #23  ●  FREE-THROW LINE DUNK  ● 1988 │
└──────────────────────────────────────────────┘
```
With blinking "● LIVE" indicator maybe. Keep ASCII-ish: `[ CHICAGO 23 ] [ LIVE ● ]`.

Caption line under scene: updates per phase.

Banner ("AIR JORDAN" big ASCII) appears center during celebration with glow pulse, then hides.

Banner font — build from map in JS:
```
const FONT = {
A: [" ## ","#  #","####","#  #","#  #"],
I: ["###"," # "," # "," # ","###"],
R: ["### ","#  #","### ","# # ","#  #"],
J: ["  ##","   #","   #","#  #"," ## "],
O: [" ## ","#  #","#  #","#  #"," ## "],
D: ["### ","#  #","#  #","#  #","### "],
N: ["#  #","## #","# ##","#  #","#  #"],
' ': ["  ","  ","  ","  ","  "]
};
```
"AIR JORDAN" rows: join letters with one space. Width: A4+I3+R4+sp2+J4+O4+R4+D4+A4+N4 + 9 spaces = 4+3+4+2+4+4+4+4+4+4+9=46 wide ✓ fits 80.

Particles: on dunk spawn ~18 chars from rim area: chars ["*",".","'","`","°","+"], animate via JS (position, velocity, gravity, fade, remove). 

Screen shake: scene gets class .shake for 400ms: keyframes translate(-2px..2px). 

Flash: white overlay opacity 0.7→0 300ms, plus red border glow?

Caption texts:
- intro: "1988. Chicago Stadium. The free-throw line..."
- run: "MJ starts his run..."
- glide: "HE TAKES OFF!"
- dunk: "SLAM DUNK!!!"
- celebrate: "The crowd goes wild!" then loop.

Also maybe a "replay" feel: it loops forever. Add small "▶ REPLAY LOOP" indicator? Not needed.

Quotes rotator in footer: MJ quotes (short, attributed):
- "I can accept failure, everyone fails at something. But I can't accept not trying." — Michael Jordan
- "I've failed over and over and over again in my life. And that is why I succeed." — Michael Jordan
- "Some people want it to happen, some wish it would happen, others make it happen." — Michael Jordan
Rotate every loop. Attributed short quotes fine.

Timeline (ms):
- t=0: reset. MJ run at x=-20ch offscreen? Start at x=2ch already on court dribbling. Run from x=2 to x=14ch (takeoff), duration 1400ms, frames A/B toggle, ball dribbling.
- t=1400: glide. Parabola from (14, stand) to (49, 3) hmm takeoff at x=14: glide start frame pos: feet at floor: y=24-18=6em, x=14ch. Glide end: (49ch, 3em)?? wait earlier: glide end y_d=3em? I said glide y_d=3 (ball bottom row y_d+3=6 at rim top row 6 ✓) and x: glide hand col 16.5 at rim... ball during glide at frame cols 15-20; at glide end ball should be right above rim: ball scene x = x+15 ∈ [65-70] → x = 50ch. So glide end (50ch, 3em). Then dunk: switch frame, y 3→2em over 120ms (slam!), ball from (x+15, y+0) = (65ch, 3em) slams to (65ch, 7em) (through rim) over 150ms with slight ease-in.
  Glide duration 1300ms (slow majestic). During glide: rotation from -6deg to +4deg? Glide frame already leaning; rotation adds flight feel: start -4°, end +6° (dipping forward). Also tiny vertical bob? The parabola handles it.
- t=2700+1300=... let me lay out: 
  - 0–1400 run
  - 1400–1500 takeoff transition (switch to glide frame at start of glide, fine at 1400)
  - 1400–2700 glide
  - 2700–2850 SLAM (dunk frame, ball slams, shake, flash, particles at 2850?)
  Actually impact moment: when ball hits rim ≈ 2850. Effects fire then.
  - 2850–4600 celebrate: ball falls through net (2850-3100), bounces floor (3100-3400 small bounce, roll right). Net sways till 3600. Crowd wild till 4600. Banner shows 3000–4500. MJ: drops from (49,2) down to (49, 6em) landing 3300, fade out 3800-4300? Or MJ stays landed then fade. Let me: MJ falls to ground y=6em by 3300 (with dunk frame → switch to RUN A standing? RUN A is running... use glide frame for landing? A standing frame needed... simplest: keep dunk frame while dropping, then fade out at 3400-4000. OK.)
  - 4600–5000: fade everything, loop restart at 5000.

Banner: show 2900–4500 with pop animation.

Ball physics after rim: through net: y from 7em to 12em (300ms, decelerate — net slows ball), then fall to floor: floor row 24, ball rest y = 20em; fall 12→20 (350ms accelerate), bounce up to 16.5 (300ms), fall to 20 (300ms), small bounce to 18.5/20, meanwhile x drifts right: 65→72ch. Then hold. Implement with keyframed JS array of tweens — I'll write a tiny tween helper or just compute in rAF loop by phase.

Simplest robust implementation: master rAF loop with `t = now - t0`, big if/else on phases, computing positions per phase with easing functions. One loop, deterministic, auto-syncs everything. Loop duration 5000ms, t = t % 5000 for seamless looping. But phase transitions (frame swaps, class toggles) need edge detection: track lastPhase, on change apply DOM changes. ✓

Ball rendering: pre with:
```
 #### 
######
######
 #### 
```
4 rows × 6 cols ✓ colored orange with glow.

Ball during run: dribble at x = mj.x + 15ch (in front), y = between hand (~mj.y+8em → standing mj.y=6 → hand 14em) and floor (20em): y = 14 + 6*|sin(π * k)| bouncing 3 times during run. Actually dribble: y goes 14→20→14; use abs(sin) with time. Sync: nice.

Shadow: ellipse under MJ: pre text `__________` hmm or use div with radial-gradient? ASCII purist: pre `(________)`? I'll use pre with `..........` styled gray, scaleX by 1/(1+h/10). During glide at x center mj.x+13. Floor y = 23.5em. Also shadow for ball? skip.

Floor: pre at row 24: 80 chars: `¯¯¯...`? Use `═`×80? A court: `____|____...`? I'll do: "─".repeat with a `|` at free-throw takeoff col 14? Floor: `═`.repeat(80) color #7a5230? Brown court. Plus second line: floor edge? Keep one line.

Court three-point-ish line? skip.

Crowd strip: below scene div, height 3em, two crowd rows + maybe top border "═══ STANDS ═══". Crowd row patterns:

calm:
row0: " o  O o  o  O o  o O  o  o O o  O  o o  O o  o  O o o  O  o o  O "
row1: "/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\/|\\"

wild: arms up:
row0: "\\o/ \\O/ \\o/ \\O/ \\o/ \\O/ ..."
Hmm escaping backslashes in JS strings — careful.

Let me define crowd via JS-generated: for i in 0..N: heads[i] = random pick "o O o"; bodies calm = "/|\\" hmm /|\. wild = "\\o/"?? mixing... Each person = 3 chars: calm: "/|\\" wait that's `/|\`. Wild: `\o/`. Person head row: calm head at middle char: " o " pattern per person: person width 4: calm: [" o  ", "/|\\ "] ugh. 

Simplify: crowd row 0 = heads: chars ["o","O","o","Q","o"] spaced 3: e.g., "o  O  o  o  O  o..."; row 1 = arms: calm "/|\\" → per person "/|\\" 3 chars aligned under head (head centered): head at index i*3+1. arms: "/|\\" = / | \ → chars: '/','|','\\'. Wild: '\\','o','/' → "\o/" arms up with head replaced?? In wild, arms up means head is between arms: "\o/" — the 'o' IS the head. So wild mode: hide head row, arms row = "\o/" per person. And add jump bounce amplitude up. 

I'll implement crowd as 20 persons ×3 chars = 60 wide. Per-person span for bounce. Two rows (heads, arms) — bounce each person (head+arms together): wrap per person in span containing head char + 
? In pre can't span across rows easily... Alternative: crowd = 2 pre rows; JS bounces whole rows with sin offsets per char → need per-char spans → build rows as sequences of  inside  (pre preserves whitespace, spans fine ✓). Each person: headSpan (row0) and armSpan (row1), bounce synced by index: set transform on both. OK doable: build crowd via JS.

Wild mode: swap arm chars to "\o/" and hide heads (set head char to " ")? Then "\o/" includes head — but head row above then empty — person looks arms-up ✓ bounce more + maybe color randomize.

Colors crowd: muted random from palette [#8899aa, #aa9988, #99aa88, #888, #a88, #8a8, #88a]. Wild: add red/white flashes.

Scene border: rounded border, subtle. Title bar above scene:
`[ CHI 23 ] FREE-THROW LINE DUNK [ ● LIVE ]` with blinking LIVE dot (CSS animation). 

Overall page: dark gradient bg, centered column, retro CRT scanlines overlay (pointer-events none), subtle vignette. Title "AIR JORDAN" big ASCII on top too? The banner appears during dunk only. Top title: styled text.

Caption: below scene, min-height fixed to avoid layout shift.

Quote footer: italic, rotates, fades.

Edge cases: backslash escaping in JS template strings: use String.raw or double backslashes carefully. I'll write frames as arrays of strings with escaped backslashes.

Frame strings with backslashes: glide has none? Glide: all '#' and '.' — no backslashes ✓ (I used dots for empty!). Run: none ✓. Dunk: none ✓. Hoop: has \ / | _ — backslashes: `.\    /.` etc. In JS: ".\\    /." — I'll be careful or use String.raw`...`.

Crowd arms contain backslashes too.

Banner font: '#' and spaces only ✓.

Let me also double check the glide silhouette reads well:

```
..........................   row0
..........................   row1
..........................   row2
..........................   row3
................##........   row4   hand up
..............##..........   row5   arm
.........###.##...........   row6   head(9-11) + arm(13-14)
.........#####............   row7   head+arm merged
........######............   row8   shoulders
......########............   row9   chest + left arm start
....###.#####.............   row10  left arm + torso
..###...#####.............   row11
.##.....#####.............   row12  left hand + hips
........#####.............   row13  hips
......###..######.........   row14  back thigh + front thigh
....###.......#####.......   row15
..###...........###.......   row16
###.............###.......   row17
####...........#####......   row18
```

Ball overlay at rows 0-3 cols 15-20:
```
...............######.....  (row0 top " #### "? ball art: row0 " #### " relative cols 15-20: col15=' ',16-19='####',20=' ' → in 26-grid: 15 dots + " #### " hmm ball art is 6 wide: [" #### ","######","######"," #### "] placed at col 15 → row0: cols16-19, row1-2: cols15-20, row3: cols16-19 ✓ matches earlier)
```

Composited glide look:
```
................####......   row0: ball top
...............######.....   row1: ball
...............######.....   row2: ball
................####......   row3: ball bottom
................##........   row4: hand/wrist
..............##..........   row5: forearm
.........###.##...........   row6: head+upper arm
.........#####............   row7
........######............   row8: shoulders
......########............   row9: chest+left arm
....###.#####.............   row10
..###...#####.............   row11
.##.....#####.............   row12
........#####.............   row13
......###..######.........   row14
....###.......#####.......   row15
..###...........###.......   row16
###.............###.......   row17
####...........#####......   row18
```

Hmm wait — ball held in hand raised: in my glide, the ball is up-forward at cols 15-20, hand row 4 col 16-17 directly under ball ✓. Arm from shoulder (row 8-9, col 8-13) up through rows 5-7 (cols 12-16) to hand ✓. Head rows 6-7 cols 9-11 ✓. This reads as a figure reaching up-forward with the ball — like the tomahawk dunk windup ✓. Legs split ✓. I'm fairly happy!

One concern: head merged with arm into blob rows 6-8 cols 9-14. Acceptable silhouette-wise.

DUNK frame final:
```
..........................
..........................
..........................
..........................
.................###......   row4: hand above ball
...............##.........   row5: arm
..............##..........   row6: arm
.........###.##...........   row7: head + arm
.........#####............   row8: shoulder
.........#####............   row9: torso
.........#####............   row10
....####.####.............   row11: left arm + torso
..##.....####.............   row12: hand + hips
.........####.............   row13: hips
.....####..######.........   row14: thighs
...##..........###........   row15
.##............###........   row16
###............###........   row17
..............#####.......   row18: front foot
```
Ball separate at frame rows 5-8, cols 16-21 during slam.

Check dunk arm: hand row4 cols17-19, arm row5 cols15-16, row6 cols14-15, row7 cols13-14, shoulder row8 cols9-13. Diagonal ✓. Head rows7-8 cols9-11 merged with shoulder — fine.

Ball at slam position frame cols16-21 rows5-8: sits right under hand (hand cols17-19 row4 ✓ on top of ball top row5 cols17-20 ✓) and at rim ✓.

Now transitions: glide end (50ch,3em) → dunk (49ch,2em): 1ch left, 1em up over ~120ms with the slam. Slight forward-down body thrust would be better (dunking body rises slightly then falls)... it's fine.

Ball sequence:
- Run: dribble x=mj.x+15 (frame col 15 area in front of run frame... run frame front arm cols 16-18 — ball at col 15-20 in front ✓), y bounce 14→20em.
- Glide start: ball snaps to hand: from dribble pos to (mj.x+15ch, mj.y+0em) quickly (150ms) — or instantly at frame switch; a quick 100ms lerp looks better.
- Glide: ball at mj.x+15ch, mj.y+0em (rows 0-3 of frame).
- Slam (t_dunk..+160ms): ball from (65ch, 3em) → (65ch, 6.5em) ease-in (fast down).
- Through net (t_dunk+160 → +450): y 6.5 → 11.5em, decelerating (net drag).
- Fall: 11.5 → 20em accelerate (+450→+800).
- Bounce: up to 16em (+800→+1100), down to 20 (+1100→+1350), up 18.3 (+1350→+1550), down 20 (+1550→+1700); x: 65 → 67 → 69 → 71ch drifting; then rest.
Loop ends 5000; at loop wrap, ball resets to dribble — visible pop... mitigate: fade ball out at t>4800, fade in at start. Or just let it pop (it's a loop, acceptable). I'll fade MJ and ball at 4700-4950, then at t=0 they appear at start positions (fade in 0-200). Clean loop ✓.

MJ positions:
- Run: x: 2→14ch linear over 0-1400ms, y=6em (feet floor... frame 19 rows, feet row 18 → y = 24-18 = 6em ✓). Bob: y += -0.3*|sin| each stride? Run frames toggle every 140ms. Slight y bob: -0.25em on frame B? ok add.
- Glide 1400-2700: parametric p = (t-1400)/1300 eased (easeInOut slightly? A dunk glide: fast rise, float, — use p linear for x, y follows parabola-ish: y = 6 - (6-3)*(sin(p*π/2))^0.8? Let me think: start (14,6), end (50,3). Vertical: rises fast early then floats: y = 6 - 3*sin(p*π/2)?? at p=1: 3 ✓. But parabola should COME DOWN at end slightly... end y=3 is above start 6 (lower value = higher). Peak should be before end then descend a bit to 3? If peak (min y) at p=0.75 y_min = 2.2 then end 3: y = 6 - 3.8*sin(p*π*0.66)? Let me just do: y = lerp(6,3,p) - 1.2*sin(p*π) → at p=0.5: 4.5-1.2=3.3; p=1: 3 ✓; p=0: 6 ✓. Peak around p≈0.6 y≈3.2-1.1≈2.1 hmm min near p where derivative 0. Fine — gentle arc ✓.
  Rotation: from -5° (leaning back at takeoff) to +5° at end: rot = -5+10*p. Plus slight scale 1→1.03.
- Dunk 2700-2850: frame switch at 2700. pos lerp (50,3)→(49,2) rot 5→12°.
- Hang 2850-3100: hold (49,2) rot 12. 
- Fall 3100-3450: y 2→6em ease-in (gravity), rot 12→0. Feet land ~3450: small bounce? tiny y dip 6→6.2→6? skip. Maybe switch to RUN A frame on landing? Dunk frame falling looks odd-ish but ok — switch to glide frame for fall? Glide legs split falling = looks like landing stride ✓ switch frame to glide at 3100. Hmm glide has hand up — landing with hand up, fine (follow-through).
- Fade 4300-4700 MJ opacity→0. Stay hidden till loop end.

Ball visibility: run start ball appears (fade in 0-150). At end fade with MJ 4600-4900.

Effects at t=2850 (impact): flash 250ms, shake 400ms, particles spawn, caption "SLAM DUNK!!!", crowd wild (until 4500), net sway 2850-3700, banner 2950-4500 (scale pop in, pulse glow, fade out), rim... rim bend? skip.

Scoreboard flash? skip.

Also court floor: add free-throw line marker at takeoff x=14: floor string: "═".repeat but with "▏" or replace char at 14 with "┃"? Let me make floor: '═'.repeat(13) + '╪' + ... hmm simpler: '▔'.repeat(80) with '|' at 14? I'll do: floor = '▔'*14 + '┯'?? Keep: `'_'.repeat(80)` and at index 14 put '†'? Let me: floorStr = '═'.repeat(80); takeoff marker: separate tiny pre at (14ch, 23.2em) text "⌃"? Meh — put marker ON floor: floor with char at 14 = '╪'. And caption mentions free-throw line. Also paint/key area near hoop? skip.

Crowd geometry: scene width 80ch. Crowd strip separate div below: width 80ch, border, 2 rows (calm) / dynamic. Persons: 3ch each ×24 = 72ch + padding. 

Row0 heads: for each person p: chars: " o "? person template: head row: ` o ` wait we need alignment with arms row `/|\`: head centered above | → head row: " o " (space, o, space); arms row: "/|\\" → /, |, \. So person width 3: heads: " o ", arms: "/|\\". Wild: arms: "\\o/" → \, o, /; heads: "   " (blank). 24 persons × 3 = 72ch, center with padding 4ch each side.

Per-person bounce: translateY(sin(time*speed + p*0.7) * amp). Calm amp 0.06em speed 4; wild amp 0.25em speed 12. Implement: spans per person in each row pre; JS loop updates style.transform. 48 spans updated per frame — fine.

Person variety: head char from ['o','O','o','0','o'], skin/color random from palette. Also some persons wear red (Bulls fans!) — palette heavy on red/white/black.

Banner show: div center of scene, pre with big text, class toggle. CSS animation pop.

Particles: pool: on impact, create 16  in scene at rim (68ch, 6.5em), random vx (-0.03..0.03 ch/ms?), vy up then gravity. Update in master loop; remove when done. Chars: ['*','✦','.','°','+','´'] — ✦ may not be monospace-safe; use ['*','.','\'','`','°','+']. Colors: red/white/orange.

Flash: div covering scene, bg white, opacity animate.

Shake: scene keyframes.

Blink LIVE dot: CSS.

Scanlines: fixed overlay div with repeating-linear-gradient + opacity 0.06 + pointer-events none. Vignette: radial-gradient overlay. Subtle CRT vibe ✓.

Caption updates per phase via phase edge detection.

Quotes: array, rotate per loop, fade transition.

Now, code structure:

```html








  
  A S C I I · D U N K · C A M
  
    ● LIVE
    CHICAGO STADIUM · FEB 6 1988
    #23 M. JORDAN
  
  
    
    
    
    
    
    
    
    
  
  
    
    
  
  get ready...
  






```

Wait: #banner is a  with class? I set #banner position absolute — it's pre, fine (pre default margins? I zeroed pre margins ✓).

Particles container: append spans directly to #scene ✓.

JS:

```js
const $ = id => document.getElementById(id);
const mjEl=$('mj'), ballEl=$('ball'), hoopEl=$('hoop'), rimEl=$('rim'),
      floorEl=$('floor'), shadowEl=$('shadow'), bannerEl=$('banner'),
      flashEl=$('flash'), sceneEl=$('scene'), captionEl=$('caption'),
      quoteEl=$('quote'), titleEl=$('title');

// ---------- big font ----------
const FONT = {
  A:[" ## ","#  #","####","#  #","#  #"],
  I:["###"," # "," # "," # ","###"],
  R:["### ","#  #","### ","# # ","#  #"],
  J:["  ##","   #","   #","#  #"," ## "],
  O:[" ## ","#  #","#  #","#  #"," ## "],
  D:["### ","#  #","#  #","#  #","### "],
  N:["#  #","## #","# ##","#  #","#  #"],
  ' ':["  ","  ","  ","  ","  "]
};
function big(s){const r=["","","","",""];for(const c of s){const g=FONT[c]||FONT[' '];for(let i=0;i<5;i++)r[i]+=g[i]+" ";}return r.join("\n");}
titleEl.textContent = big("JORDAN");
bannerEl.textContent = big("AIR JORDAN");
```

Banner width: 46+ — ok.

```js
// ---------- art ----------
const GLIDE=[...19 strings...];
const RUN_A=[...]; const RUN_B=[...]; const DUNKF=[...];
const BALLA=[" #### ","######","######"," #### "];
const HOOP_A=[...24...]; const HOOP_B=[...24...];
const RIM=["________","|______|"];
ballEl.textContent=BALLA.join("\n");
rimEl.textContent=RIM.join("\n");
rimEl.style.left="64ch"; rimEl.style.top="6em";
hoopEl.style.left="64ch"; hoopEl.style.top="0em";
floorEl.textContent="\u2550".repeat(14)+"\u256A"+"\u2550".repeat(65); // ═ ╪
```
Floor: 14+1+65=80 ✓. Marker at index 14 (takeoff) ✓. floorEl.style.top="23.4em"; color set in CSS.

shadow: textContent="............" (12 dots); top 22.95em.

Crowd build:
```js
const P=22, headSpans=[], armSpans=[], headChars=[];
const palette=["#ff4d5e","#e8e8ec","#ff4d5e","#9aa0ad","#ff9430","#e8e8ec","#c0392b","#7f8c9b"];
for(let i=0;i{ quoteEl.textContent=QUOTES[qi%QUOTES.length]; qi++; quoteEl.style.opacity=1; },450); }
```

Helpers:
```js
const clamp01=v=>v<0?0:v>1?1:v;
const lerp=(a,b,p)=>a+(b-a)*p;
const eIn=p=>p*p, eOut=p=>1-(1-p)*(1-p);
const eOutBack=p=>{const c=1.70158;return 1+(c+1)*Math.pow(p-1,3)+c*Math.pow(p-1,2);};
```

Particles:
```js
const pts=[]; const PT_CHARS=["*",".","'","`","+","\u00B0"];
function spawnParticles(){
  for(let i=0;i<18;i++){
    const s=document.createElement("span"); s.className="pt";
    s.textContent=PT_CHARS[Math.floor(Math.random()*PT_CHARS.length)];
    s.style.color=["#ffd54a","#ff5252","#ffffff","#ff9430"][i%4];
    sceneEl.appendChild(s);
    pts.push({el:s,x0:66+Math.random()*4,y0:5.5+Math.random()*2,
      vx:(Math.random()-.5)*.014, vy:-.016+Math.random()*.022,
      g:.00006+Math.random()*.00005, b:performance.now(), life:1100+Math.random()*600});
  }
}
function updateParticles(now){
  for(let i=pts.length-1;i>=0;i--){const p=pts[i],a=now-p.b;
    if(a>p.life){p.el.remove();pts.splice(i,1);continue;}
    const x=p.x0+p.vx*a, y=p.y0+p.vy*a+0.5*p.g*a*a;
    p.el.style.left=x+"ch"; p.el.style.top=y+"em";
    p.el.style.opacity=String(1-a/p.life);
  }
}
```

Impact:
```js
function impact(){
  flashEl.style.transition="none"; // use per-frame flash instead; skip
  sceneEl.classList.remove("shake"); void sceneEl.offsetWidth; sceneEl.classList.add("shake");
  spawnParticles();
}
```
Flash per-frame via t window ✓.

Main loop:
```js
const LOOP=5000; const t0=performance.now();
let lastPhase="", curFrame="", lastNet=false, lastRun=false;
function setFrame(txt){ if(txt!==curFrame){curFrame=txt; mjEl.textContent=txt;} }
const S={
 RUN:[...as strings...]
}
```
Frames: store joined strings: const F_GLIDE=GLIDE.join("\n") etc.

per-frame:

```js
function frame(now){
  const tAbs=now-t0, t=tAbs%LOOP;
  const ph = t<1400?"RUN":t<2700?"GLIDE":t<2850?"DUNK":t<3100?"HANG":t<3450?"FALL":t<4300?"REST":t<4700?"FADE":"DARK";
  if(ph!==lastPhase){
    if(ph==="RUN"){ captionEl.textContent="MJ takes the ball up the court..."; if(lastPhase==="DARK") rotateQuote(); }
    if(ph==="GLIDE"){ captionEl.textContent="HE TAKES OFF FROM THE FREE-THROW LINE!"; }
    if(ph==="DUNK"){ captionEl.textContent="SLAM DUNK!!!"; }
    if(ph==="HANG"){ impact(); }
    if(ph==="FALL"){ captionEl.textContent="The crowd goes WILD! #23 does it again!"; }
    if(ph==="DARK"){ captionEl.textContent=""; }
    lastPhase=ph;
  }
  let mx=0,my=0,rot=0,sc=1, bx=0,by=0;
  if(ph==="RUN"){
    const runFrame=Math.floor(t/140)%2===0;
    setFrame(runFrame?F_RUNA:F_RUNB);
    const p=t/1400; mx=lerp(2,14,p); my=4.4-(runFrame?0:0.22);
    bx=mx+16; by=13+6.4*Math.abs(Math.cos(Math.PI*t/466));
    rot=0; sc=1;
  } else if(ph==="GLIDE"){
    setFrame(F_GLIDE);
    const p=(t-1400)/1300;
    mx=lerp(14,50,p);
    my=4.4-2.4*p-1.6*Math.sin(Math.PI*p);
    rot=lerp(-6,5,p); sc=1+0.03*Math.sin(Math.PI*p);
    bx=mx+15; by=my;
  } else if(ph==="DUNK"){
    setFrame(F_DUNK);
    const p=(t-2700)/150;
    mx=lerp(50,49,p); my=lerp(2,1,p); rot=lerp(5,12,p);
    bx=65; by=2+4*eIn(p);
  } else if(ph==="HANG"){
    setFrame(F_DUNK);
    const p=(t-2850)/250;
    mx=49; my=1; rot=12; bx=65; by=6+3.5*(p<.5?2*p*p:1-Math.pow(-2*p+2,2)/2); // easeInOut
  } else if(ph==="FALL"){
    setFrame(F_GLIDE);
    const p=(t-3100)/350;
    mx=49; my=1+3.4*eIn(p); rot=lerp(12,0,p);
    [bx,by]=ballAfter(t);
  } else { // REST FADE DARK
    setFrame(F_GLIDE);
    mx=49; my=4.4+ (ph==="REST"&&t<3650? 0.25*Math.sin(Math.PI*(t-3450)/200):0);
    rot=0; [bx,by]=ballAfter(t);
  }
```

Hmm my in FALL: 1+3.4p → 4.4 ✓ matches stand. GLIDE end my: 4.4-2.4=2 ✓ (sin(π)=0). DUNK start my=2 ✓ continuous ✓ DUNK end my=1, HANG my=1 ✓ FALL end 4.4 ✓ REST my 4.4 ✓.

Wait GLIDE phase: at p=0 my=4.4 but formula 4.4-0-0=4.4 ✓ mx=14 ✓ continuous with RUN end (14, 4.4 bob?) RUN end my=4.4 or 4.18 depending on frame parity at t=1400: floor(1400/140)=10 → even → runFrame true → my=4.4 ✓ continuous ✓ and by at t=1400: |cos(π*1400/466)|=|cos(3.004π)|≈|cos(0.0126)|≈0.9999→ by≈19.4?? cos(3.004π): 3.004π rad = cos(3π+0.004π)=cos(3π)cos(0.0126)-... = -0.9999 → abs ≈ 1 → by = 13+6.4 = 19.4 (bottom). Hmm I wanted top at end. |cos(3.004π)| = |cos(3.004*180°)| = |cos(541°)| = |cos(181°)| ≈ 1. by=19.4 = floor level. So at glide start ball snaps from floor (mx+16=30, 19.4) to hand (mx+15=29, 4.4) — a 15em jump in one frame = jarring. Add quick blend: during first 120ms of GLIDE, lerp ball from (30,19.4) to hand pos:

```js
else if(ph==="GLIDE"){
  const p=(t-1400)/1300; mx=...; my=...; 
  bx=mx+15; by=my;
  const bp=clamp01((t-1400)/120);
  if(bp<1){ bx=lerp(30,bx,eOut(bp)); by=lerp(19.4,by,eOut(bp)); }
}
```
✓ smooth pickup.

Alternatively make dribble end at top: bounce count: 3 bounces: t/466 → at 1400 ≈ 3.004 half-cycles?? |cos(π t/466)|: period 466ms... t=1400 → 3.004 → cos(3.004π)≈-1 → bottom?? |cos(π*3.004)|=|cos(3.004π)|. cos(3.004π)=cos(π*3+0.004π)=-cos(0.0126)≈-1 → abs 1 → by=19.4 bottom. Wait by=13+6.4*|...|: abs=1 → 19.4 = BOTTOM; abs=0 → 13 top. So ends at bottom. With blend pickup ✓ fine.

ballAfter:
```js
function ballAfter(t){
  if(t<3450){const p=(t-3100)/350;return[lerp(65,67,eOut(p)),lerp(9.5,19.4,eIn(p))];}
  if(t<3730){const p=(t-3450)/280;return[lerp(67,69,p),lerp(19.4,16,eOut(p))];}
  if(t<3930){const p=(t-3730)/200;return[lerp(69,70,p),lerp(16,19.4,eIn(p))];}
  if(t<4130){const p=(t-3930)/200;return[lerp(70,71,p),lerp(19.4,17.6,eOut(p))];}
  if(t<4280){const p=(t-4130)/150;return[lerp(71,71.5,p),lerp(17.6,19.4,eIn(p))];}
  return[71.5,19.4];
}
```
HANG end by: p=1: 6+3.5=9.5 ✓ matches ballAfter start ✓ bx 65 ✓.

Apply positions:
```js
  mjEl.style.left=mx+"ch"; mjEl.style.top=my+"em";
  mjEl.style.transform=`rotate(${rot}deg) scale(${sc})`;
  ballEl.style.left=bx+"ch"; ballEl.style.top=by+"em";
```

Opacities:
```js
  let mOp = t<150? t/150 : t<4300?1: t<4700? 1-(t-4300)/400 : 0;
  mjEl.style.opacity=mOp;
  let bOp = t<150? t/150 : t<4600?1: t<4900? 1-(t-4600)/300 : 0;
  ballEl.style.opacity=bOp;
```

Shadow:
```js
  const h=4.4-my; // height above ground-ish
  const sOp=Math.max(0,0.55-0.16*h)*mOp;
  shadowEl.style.left=(mx+7)+"ch"; shadowEl.style.top="22.95em";
  shadowEl.style.opacity=sOp;
  shadowEl.style.transform=`scaleX(${Math.max(.5,1-0.12*h)})`;
```
shadow visible during run (h≈0, .55) ✓ glide h up to ~3 → op ~0.07 ✓ subtle ✓.

Banner:
```js
  let bnrO=0, bnrS=1;
  if(t>=2950&&t<3200){const p=(t-2950)/250; bnrO=p; bnrS=eOutBack(p)*1; bnrS=Math.max(.4, eOutBack(p));}
  else if(t>=3200&&t<4300){bnrO=1; bnrS=1+0.02*Math.sin(tAbs/160);}
  else if(t>=4300&&t<4500){bnrO=1-(t-4300)/200; bnrS=1;}
  bannerEl.style.opacity=bnrO;
  bannerEl.style.transform=`translate(-50%,-50%) rotate(-3deg) scale(${bnrS})`;
```

Flash:
```js
  flashEl.style.opacity = (t>=2850&&t<3180)? String(0.5*(1-(t-2850)/330)) : "0";
```

Net sway:
```js
  const sway = t>=2850&&t<3750;
  const useB = sway && Math.floor(t/110)%2===1;
  if(useB!==lastNet){ lastNet=useB; hoopEl.textContent = useB?F_HOOPB:F_HOOPA; }
```
Init hoopEl textContent=F_HOOPA at start.

Crowd:
```js
  setCrowd(t>=2850&&t<=4500);
  for(let i=0;ip<.5?2*p*p:1-Math.pow(-2*p+2,2)/2;

Also DUNK ball: by=2+4*eIn(p): at p=1 → 6 ✓ matches HANG start 6 ✓ bx 65 ✓ continuous with GLIDE end bx=65 ✓ by=2 ✓ (glide end by=my=2 ✓✓).

Glide bx: mx+15 → end 65 ✓.

RUN end bx=30 ✓ blend start 30 ✓.

Great, geometry chain is continuous.

Now hoop arts as joined strings:

F_HOOPA: rows:
```
"........##", x8
".\\    /..",
".|\\  /|..",
".| \\/ |..",
".| /\\ |..",
"..\\__/...",
"........##" x11
```
Row8 check: ".\\    /.." → chars: . \ (sp×4) / . . = 1+1+4+1+3=10 ✓. Hmm net top width 5 (cols1-6)? col1 '\' col6 '/' — between them cols 2-5 spaces: rim inner cols 1-6 ✓ aligned under rim ✓.
Row9: ".|\\  /|.." → . | \ (sp2) / | . . = 10 ✓ cols:1 '|',2 '\',5 '/',6 '|'.
Row10: ".| \\/ |.." → . | sp \ / sp | . . ✓ cols1'|',3'\',4'/',6'|' ✓ X forming.
Row11: ".| /\\ |.." ✓.
Row12: "..\\__/..." → cols2'\',5'/' wait: . . \ _ _ / . . . → col2 backslash, cols3-4 underscores, col5 slash ✓ net bottom closing ✓.

F_HOOPB rows 8-12:
"..\\    /."  → col2 backslash col7 slash? chars: . . \ sp sp sp sp / . = 10 ✓ shifted +1 ✓
"..|\\  /|."
"..| \\/ |."
"..| /\\ |."
"...\\__/../"→ need 10: "...\\__/" is 7 chars + "..." = "...\\__/..." = 10 ✓ hmm that's same as A row12?? A row12 "..\\__/..." vs B "...\\__/..." shifted +1 ✓ different ✓.

Net sway alternates these ✓.

Count F_HOOPA total rows: 8+5+11=24 ✓ ends row 23 at floor-ish ✓ (top 0 → rows 0-23; floor 23.4; pole last row 23 ✓ touches).

Floor string: "═".repeat(14)+"╪"+"═".repeat(65) — ╪ might render odd width in some fonts; Courier New has box chars? Maybe missing glyph. Safer: use '=' repeat with '|' at 14: "=".repeat(14)+"|"+"=".repeat(65). Courier has = and | ✓ safe. Color #8a5a30 ✓.

Crowd width: 66ch centered ✓.

Also crowd chars arms '/|\\' in JS string: "/|\\" ✓ wild "\\o/" ✓.

The "0" head char may look odd; drop it: ["o","O","o","o","O"].

Check RUN bob: my=4.4-(runFrame?0:0.22) — at t=1400 runFrame even→4.4 ✓ (floor(t/140): t=1400 → 10 even ✓; but computed runFrame=Math.floor(t/140)%2===0 → at 1400: 10%2=0 → true ✓).

Rotation origin 50% 55% ✓.

Scale during glide up to 1.03 subtle ✓.

Now, the banner text — "AIR JORDAN" uses FONT with keys A,I,R,' ',J,O,R,D,A,N — all exist ✓.

Title "JORDAN" ✓.

Let me double check big() row building handles the space char: FONT[' '] 2-wide ✓.

The subtitle letterspacing .35em with monospace fine.

Also: add slight entrance animation on page load? The loop starts at t=0 automatically ✓.

Check the GLIDE frame visual once more as final composite with ball at hand... I'm reasonably confident it reads as a dunking figure.

Potential improvement: add ball spin? It's '#' blocks, can't spin visually. Fine.

Add backboard shake on impact? The shake class covers whole scene ✓.

Edge: `captionEl` initial HTML "get ready..." gets replaced at first RUN enter ✓.

I think also nice: small "REPLAY ↻ LOOP" indicator bottom-right of scene? skip.

Let me also consider the scene height: 24.6em at 16px = 393px ✓ plus crowd/captions ~ total ~700px tall — fits.

One more check — pre line-height 1 with Courier New: descenders/ascenders on '_' and '|' might clip vertically between rows? line-height:1 on Courier New can clip underscores slightly in some browsers. Use line-height:1.02? Tiny gaps in silhouette... The silhouette uses '#' full blocks: line-height 1 could show hairline gaps between rows in some renderers. Safer: line-height: 0.98?? overlapping slightly to avoid gaps. Hmm: use line-height:1 and accept possible hairlines? A common trick: line-height: 1; it usually renders '#' contiguous-ish. Actually block chars '#' don't fill full cell vertically; gaps may appear regardless — that's the ASCII aesthetic, acceptable. But big horizontal bands (ball) might look stripey. Alternative: use '█' instead of '#' for the silhouette! █ (U+2588 FULL BLOCK) fills the whole cell → solid silhouette, much better looking. Courier New includes █ usually ✓ (common glyph, widely supported). Risk: missing glyph on some systems → fallback font still has it typically (system monospace has it). I'll use '█' for frames and ball and hoop board. Line-height 1 → blocks tile seamlessly ✓. Width: block char advance = 1ch ✓ same as '.' ✓ alignment preserved.

Use '█' in GLIDE/RUN/DUNK/ball/hoop-board; net/rim keep ASCII chars. Crowd fine.

Replace in all art strings: '#' → '█'. Ball rows " ████ ","██████",... board "........██" ✓ already blocks? I wrote ## — convert to ██.

Font glow text-shadow on blocks → nice neon silhouette ✓.

Now finalize counts with █ same as # ✓ (just char swap).

Also title/banner font letters use '#' — swap to '█' too for consistency ✓ looks bolder.

Double-check each art row length is 26 (frames) / 10 (hoop) / 6 (ball) — I counted with '#'; identical with █.

Let me re-verify a couple of tricky rows:
GLIDE row10: "....###.#####............." → 4+3+1+5+13=26 ✓.
GLIDE row14: "......###..######........." → 6+3+2+6+9=26 ✓.
DUNK row14: ".....####..######........." → 5+4+2+6+9=26 ✓.
RUN_A row9: ".........##.#####..##....." → 9+2+1+5+2+2+5=26 ✓.

Banner font widths consistent ✓.

Now write final code fully, carefully with all escaping. In hoop strings, backslashes doubled. In crowd arms "/|\\" and "\\o/".

Also `void sceneEl.offsetWidth;` for reflow ✓.

Impact also maybe scale rim briefly? skip.

Write the master rAF: also guard first call.

Potential issue: mj transform with rotate moves his feet off floor slightly during run? rot=0 during run ✓ only glide/dunk rotate (airborne) ✓.

During FALL rot 12→0 while descending ✓ lands straight ✓.

REST settle bounce: my=4.4+0.25*sin(π*(t-3450)/200) for t<3650 — sin goes 0→1→0 positive dip down 0.25 ✓.

Also during FADE my should be 4.4 constant: my=4.4 + (ph==="REST"&&t<3650? ... :0) ✓ FADE not included ✓.

Ball during REST/FADE/DARK: ballAfter covers t≥4280 → rest [71.5,19.4] ✓ DARK t≥4700 ✓ ballAfter still returns rest ✓ opacity 0 ✓.

Crowd wild window end 4500; FADE starts 4300 overlapping fine.

setCrowd initial: crowdWild=false and arms built as '/|\\' ✓ no initial call needed; but first frame calls setCrowd(false) → returns early ✓.

Also the caption text color and the quote fade-in initial: quoteEl starts empty; set quoteEl.textContent=QUOTES[0] at init, qi=1 ✓.

One more: title uses 'JORDAN' — but maybe "AIR JORDAN" title and banner "SLAM DUNK!"? Banner letters: S,L,M,D,U,N,K,! needed — more letters to define (S,L,M,U,K,!). Stick with title "JORDAN", banner "AIR JORDAN" ✓ already have letters.

Hmm — add number 23? Banner second line "#23" small plain text under big text: bannerEl is pre; append "\n   # 2 3   "? FONT has no digits. Add small line: banner textContent = big("AIR JORDAN") + "\n· #23 ·"; centered (pre text-align center via CSS #banner{text-align:center} ✓ set).

Title: big("JORDAN")+"\n"? subtitle div separate ✓.

Check #banner CSS has text-align:center — yes set.

Also `#title` whiteSpace pre ✓ default.

Responsive: 82ch width at font-size 16 = 82*9.6=787px?? Courier advance 0.6em → 16*0.6=9.6px → 82ch=787px + body padding. Max-width media: font-size clamp handles: calc(100vw/86) → at 787px viewport font ≈ 9.15px → 82ch≈749px ✓ fits.

Wait #app width 82ch but scene children positioned up to 80ch ✓ hoop at 64+10=74 ✓ banner centered ✓ floor 80 wide + 1ch pad each side? floor 80 = app 82 slight pad ✓.

Crowd rows 66ch centered in 82 ✓.

Everything checks. Let me also add `overflow:hidden` on scene — yes ✓ MJ entering from x=2 not offscreen so fine.

Final code assembly. Also small touch: cursor default; selection none ✓.

Add keydown? no.

Also ensure script at end of body ✓.

Write it out now. Also include HTML lang pt-BR? User wrote Portuguese ("Monte uma artwork ASCII do michael jordan, que não pode ser estática"). The UI text could be Portuguese! Better: captions in PT-BR:
- Board: "CHICAGO STADIUM · 6 FEV 1988", "#23 M. JORDAN", "● AO VIVO"
- Captions: "MJ leva a bola pela quadra...", "ELE DECOLA DA LINHA DE LANCE LIVRE!", "ENTERRADA!!!", "A torcida vai à loucura! #23 fez de novo!"
- Quote footer: keep quotes in English with attribution (original quotes) or PT? Quotes translation: I'll keep original English quotes (authentic) — fine, or PT translations: "Eu posso aceitar o fracasso, todo mundo falha em algo. Mas eu não posso aceitar não tentar." — PT feels more tailored. I'll use PT translations attributed to Michael Jordan. Hmm — translated quotes risk slight inaccuracy but these are well-known. I'll do PT versions.

- subtitle: "A S C I I · E N T E R R A D A · A O · V I V O"? Keep "ASCII DUNK CAM" + "100% animada"? Subtitle: "A R T W O R K · A S C I I · 100% · A N I M A D A". 
- caption initial: "preparar... apontar..."

Response text outside HTML: minimal — the instructions say don't mention iframe; just present the code block. I'll give a one-line intro in PT and the full HTML.

Title tag: "Air Jordan — ASCII Animado".

Quotes PT:
1. "Eu posso aceitar o fracasso. Todo mundo falha em alguma coisa. Mas eu não posso aceitar não tentar." — Michael Jordan
2. "Eu errei mais de 9.000 arremessos na minha carreira... E é por isso que eu tenho sucesso." — hmm long; use: "Eu falhei repetidas vezes na minha vida. E é por isso que eu tenho sucesso." — Michael Jordan
3. "Algumas pessoas querem que aconteça, outras torcem, e outras fazem acontecer." — Michael Jordan
4. "Talentos vencem jogos, mas trabalho em equipe vence campeonatos." — Michael Jordan

OK.

Also caption phase texts PT as above.

One more consideration on hoop left position: 64ch — check MJ dunk frame right edge: x=49+26=75 < 82 ✓. Ball rest 71.5+6=77.5 ✓.

Now write everything.

After writing, mentally run the first frames for runtime errors:
- elements exist ✓
- F_RUNA etc defined before use in frame() ✓ define all consts before rAF start.
- ballAfter used before definition? define function before frame loop — function declarations hoist ✓ use function syntax.
- Destructuring [bx,by]=ballAfter(t) inside else branch: bx,by already let ✓ need semicolons care.

Also in RUN branch bx depends mx ✓.

Also initial hoopEl.textContent set before loop ✓.

Set shadow textContent "............" ✓ top set in loop ✓ left in loop ✓.

CSS: .abs has top:0 left:0 defaults; loop sets style each frame ✓.

mj initial opacity: loop handles ✓.

Edge: at t exactly 0: phase RUN, p=0 mx=2 ✓.

DONE — write final answer with brief PT intro. Keep intro minimal, code complete.

One last review of crowd row alignment: heads pre and arms pre both text-align:center; total span widths equal (22×3=66ch) ✓ aligned vertically ✓.

transform on .cp spans — inline-block ✓.

Wild arms '\o/' — backslash first char: in JS "\\o/" ✓ renders \o/ ✓.

Particles chars include backtick and quote — in JS array use ["*",".","'","`","+","°"] — mixing quotes fine with double-quoted strings ✓.

Flash overlay above banner (z20 vs 10) — flash covers banner briefly at impact: banner appears 2950, flash done 3180 overlapping — flash is semi-transparent white 0.5→0, banner below it slightly washed 100ms — acceptable, or raise banner z to 25? Put banner z 25 above flash — banner pops clean. Set #banner z-index:25.

Scene shake moves children together ✓.

OK writing final.


Aqui está — o voo icônico do #23 em ASCII, 100% animado (drible, decolagem da linha de lance livre, enterrada, torcida em êxtase):

```html





Air Jordan — Artwork ASCII Animada




  
  A R T W O R K · A S C I I · 100% · A N I M A D A
  
    ● AO VIVO
    CHICAGO STADIUM · 6 FEV 1988
    #23 M. JORDAN
  
  
    
    
    
    
    
    
    
    
  
  
    
    
  
  preparar... apontar...
  







```

**O que acontece na cena (loop infinito de 5s):**
- 🏀 **Drible** — MJ corre com a bola quicando em física realista
- 🛫 **A decolagem** — ele sai da linha de lance livre (marcada no chão) numa trajetória parabólica, com rotação e sombra que encolhe
- 💥 **A enterrada** — bola atravessa a cesta, rede balança, tela treme, flash + partículas ASCII explodem
- 🤩 **Êxtase** — torcida pula com braços pro ar (`\o/`), banner "AIR JORDAN" pulsando, e frases do MJ rodando no rodapé

Tudo em fonte monoespaçada pura — nem um pixel de imagem.
Jordan test
