The user wants me to create an HTML file with an animation of a burning paper (in Vietnamese: "Tạo 1 file HTML animation 1 tờ giấy cháy" = "Create 1 HTML file animation of a burning paper"). I need to create a complete HTML file with a burning paper animation. This should include: 1. A paper element 2. Fire/flame effects 3. Burning effect that consumes the paper 4. Smoke effects possibly 5. Ash effects I'll use CSS animations and possibly JavaScript/canvas for a more realistic effect. Let me create a nice burning paper animation. I can approach this in a few ways: 1. Pure CSS animation - simpler but less realistic 2. Canvas-based with JavaScript - more realistic fire particles 3. Combination approach Let me create a canvas-based approach for the fire particles combined with CSS for the paper burning effect. I'll make: - A paper that gradually burns from one edge - Fire particles at the burning edge - Smoke particles rising - The paper shrinks/disintegrates as it burns - Embers/glowing effect at the burn line Let me write this as a complete HTML file. Since the user might view this in an iframe, I should include everything in one code block. Key elements: 1. Paper with some text/content on it 2. Burning edge that moves across the paper 3. Fire particles (orange, yellow, red) 4. Smoke particles (gray, rising) 5. Charred/blackened edge effect 6. Glowing ember line I'll use canvas for the whole thing to have maximum control. Let me design: - Draw paper as a rectangle - Track a "burn front" that progresses across the paper (maybe with some noise so it's not a straight line) - Areas behind the burn front become charred (black) then disappear - Fire particles spawn at the burn front - Smoke particles spawn and rise - Ember glow at the burn front Let me code this: ```html Tờ Giấy Cháy

``` For the burn effect, I'll use a burn map approach: - Create an offscreen canvas for the paper - Use a noise-based burn front that progresses over time - Each pixel/region has a "burn time" - when current time exceeds it, that part starts burning - Stages: unburned -> glowing edge -> charred -> gone (transparent) Implementation: 1. Generate a noise map (value noise) for burn progression 2. Burn starts from bottom edge (fire usually burns upward) or from one corner 3. At each frame: - Draw paper where not yet burned - Draw glowing edge where burning is active - Draw charred area briefly then it becomes transparent - Spawn particles along the active burn front Let me write the code: ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Paper dimensions const paperW = 400; const paperH = 560; // Noise map for burn pattern // Use a grid of values const gridSize = 8; // each cell is 8px const cols = Math.ceil(paperW / gridSize); const rows = Math.ceil(paperH / gridSize); // Burn threshold per cell - based on distance from bottom + noise const burnMap = []; for (let y = 0; y < rows; y++) { burnMap[y] = []; for (let x = 0; x < cols; x++) { // Distance from bottom (normalized) - bottom burns first const distFromBottom = (rows - y) / rows; const noise = Math.random() * 0.3; burnMap[y][x] = distFromBottom * 0.8 + noise; } } ``` Actually, a simpler approach: burn progresses from bottom to top with noise. Each cell has a threshold value between 0 and 1. A global burnProgress goes from 0 to 1+ over time. When burnProgress > threshold, cell burns. Cell states based on (burnProgress - threshold): - diff < 0: unburned - 0 <= diff < glowTime: glowing (orange/red edge) - glowTime <= diff < charTime: charred (black) - diff >= charTime: gone (transparent) The burn front is where diff is near 0 - spawn fire particles there. For particles: ```javascript class Particle { constructor(x, y, type) { ... } update() { ... } draw() { ... } } ``` Fire particles: rise up, flicker, colors from yellow to orange to red, fade out Smoke particles: rise slowly, expand, gray, fade out Ember particles: small bright dots that float up Let me also add: - Paper texture/content (lines of text) - Slight paper curl maybe (hard in 2D, skip or fake) - Background (dark for contrast) - Restart button For drawing the paper efficiently, I could: - Draw the full paper to an offscreen canvas once - Each frame, draw the offscreen paper canvas with a "destination-in" mask of unburned areas, or draw cell by cell Simpler approach: each frame, for each cell that isn't fully burned, draw the corresponding portion of the paper image. For glowing cells, overlay a glow color. For charred cells, draw black. Actually drawing cell by cell with drawImage from the paper source: ```javascript for each cell: if state is unburned/glow/char: ctx.drawImage(paperCanvas, sx, sy, gridSize, gridSize, dx, dy, gridSize, gridSize); if glow: overlay orange with alpha if char: overlay black ``` For smooth edges, use smaller grid or add jitter. Grid of 6-8px should look decent. Let me use 5px for finer detail but that means more cells: 400/5 * 560/5 = 80 * 112 = 8960 cells per frame - that's fine for canvas. Actually, to make the burn edge look nicer, I can make the ash/charred area crumble - cells near the burn front can have random offsets/rotation as they fall off. That's a nice touch but adds complexity. Let me add simple falling ash flakes instead - particles that look like small dark flakes falling. Let me structure the whole thing: ```html Tờ Giấy Cháy - Burning Paper Animation

🔥 Tờ Giấy Cháy 🔥

``` Now the JavaScript: ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const W = canvas.width, H = canvas.height; // Paper setup const PAPER_W = 380, PAPER_H = 520; const paperX = (W - PAPER_W) / 2; const paperY = (H - PAPER_H) / 2 - 20; // Create paper content on offscreen canvas function createPaper() { const pc = document.createElement('canvas'); pc.width = PAPER_W; pc.height = PAPER_H; const c = pc.getContext('2d'); // Paper background c.fillStyle = '#f5f0e1'; c.fillRect(0, 0, PAPER_W, PAPER_H); // Subtle texture for (let i = 0; i < 300; i++) { c.fillStyle = `rgba(0,0,0,${Math.random()*0.03})`; c.fillRect(Math.random()*PAPER_W, Math.random()*PAPER_H, 2, 2); } // Title c.fillStyle = '#333'; c.font = 'bold 24px Georgia'; c.textAlign = 'center'; c.fillText('TỜ GIẤY QUAN TRỌNG', PAPER_W/2, 60); // Lines of text c.strokeStyle = '#999'; c.lineWidth = 2; for (let y = 100; y < PAPER_H - 40; y += 28) { const lineW = PAPER_W - 60 - Math.random() * 60; c.beginPath(); c.moveTo(30, y); c.lineTo(30 + lineW, y); c.stroke(); } // Red seal c.strokeStyle = '#c0392b'; c.lineWidth = 3; c.beginPath(); c.arc(PAPER_W - 70, PAPER_H - 70, 30, 0, Math.PI*2); c.stroke(); return pc; } ``` Burn map with better noise (smooth noise). I'll use value noise with interpolation or just layered random. Simple approach: generate coarse random grid, interpolate. ```javascript function generateBurnMap(cols, rows) { // coarse noise const coarseCols = 8, coarseRows = 10; const coarse = []; for (let y = 0; y <= coarseRows; y++) { coarse[y] = []; for (let x = 0; x <= coarseCols; x++) { coarse[y][x] = Math.random(); } } const map = []; for (let y = 0; y < rows; y++) { map[y] = []; for (let x = 0; x < cols; x++) { // bilinear interpolation of coarse noise const fx = (x / cols) * coarseCols; const fy = (y / rows) * coarseRows; const x0 = Math.floor(fx), y0 = Math.floor(fy); const x1 = Math.min(x0+1, coarseCols), y1 = Math.min(y0+1, coarseRows); const tx = fx - x0, ty = fy - y0; const n = coarse[y0][x0]*(1-tx)*(1-ty) + coarse[y0][x1]*tx*(1-ty) + coarse[y1][x0]*(1-tx)*ty + coarse[y1][x1]*tx*ty; // base: burns from bottom up const base = 1 - (y / (rows - 1)); // 1 at top... wait // y=0 is top of paper. Bottom should burn first. // threshold small = burns first const threshold = (1 - y/(rows-1)) * 0.7 + n * 0.35; map[y][x] = threshold; } } return map; } ``` Wait: y=0 is the top. Bottom of paper is y=rows-1. Bottom burns first → cells at bottom have small threshold. So threshold = (1 - y/(rows-1)) gives 0 at bottom... no: at y = rows-1 (bottom), (1 - 1) = 0 ✓ burns first. At y = 0 (top), (1-0) = 1, burns last ✓. Good. Add noise so the front is irregular. Also maybe start fire at bottom center or whole bottom edge. Let's start from the bottom edge generally with noise. Burn states: ```javascript const GLOW = 0.06; // duration of glowing edge (in progress units) const CHAR = 0.12; // then charred // after that: gone ``` Actually for visual: when diff = burnProgress - threshold: - diff < 0: paper intact - 0 <= diff < 0.05: glowing orange/red (burning edge) - 0.05 <= diff < 0.15: black charred, will crumble - diff >= 0.15: gone Hmm, but a real burning paper: the edge glows, then blackens and the black part curls and disappears. The charred zone should be thin. Let me tune: GLOW = 0.04, CHAR zone = 0.10. Particles: - Spawn at burn front cells (where 0 <= diff < 0.05), randomly - Flame particles: start at front, rise with flicker - Smoke: spawn slightly above front, rise and expand - Embers: occasional bright sparks Also nice: ash flakes that detach and fall/flutter down. Glow light: radial gradient around burn front - could add a subtle ambient orange glow under the paper. Maybe simple: draw radial gradient at average front position. Animation loop: ```javascript let burnProgress = 0; const BURN_SPEED = 0.0018; // per frame at 60fps -> full burn in ~1/(0.0018) ≈ 555 frames ≈ 9.3s. ``` Max threshold is ~1.05 (0.7 + 0.35), so progress needs to reach ~1.2 to fully burn. Duration ~ 1.2/0.0018 ≈ 666 frames ≈ 11s. Good. Also add slight paper wobble? Keep it simple. After fully burned, show ashes or just embers fading. Then allow restart. Also, flames: for nicer flames I can draw particles as radial gradients (additive blending with globalCompositeOperation = 'lighter'). Flame particle: ```javascript { x, y, vx: (Math.random()-0.5)*0.5, vy: -1 - Math.random()*2, life: 1, decay: 0.02 + Math.random()*0.02, size: 8 + Math.random()*14, type: 'flame' } ``` Color based on life: white-yellow → yellow → orange → red → dark. Draw with 'lighter' composite and radial gradient. Smoke particle: ```javascript { x, y, vx small, vy: -0.5 - Math.random(), life: 1, decay: 0.005, size: 10 growing, gray with low alpha } ``` Draw with normal composite, rgba gray. Ember: tiny bright orange dots with strong glow, float upward fast, flicker. Ash flake: dark gray small rect, falls down with swaying (sin), rotates. Ambient glow: radial gradient centered at burn front centroid, radius ~150, orange with low alpha, drawn before particles but after background. Also draw a soft glow on the burning edge itself: for cells in glow state, after drawing paper portion, fill with rgba(255, 120+rand, 0, alpha). For charred cells: fill black, and as diff increases, alpha decreases (crumbling away). Actually making charred cells fade out looks like disintegration. Also could make charred cells shrink slightly (curl effect). Draw with slight scale-down: draw the cell image scaled toward its center as it chars — simulates curling. Nice touch: ```javascript if (charred) { const shrink = 1 - (diff - GLOW)/(CHAR) * 0.4; // shrinks // draw scaled } ``` Let me manage render order: 1. Background (CSS gradient, clear canvas each frame) 2. Ambient glow behind paper 3. Paper cells (with states) 4. Flame particles (additive) 5. Embers (additive) 6. Smoke (normal, on top) 7. Ash flakes Also flickering light on the whole scene: vary ambient glow intensity with noise. Sound? No, keep it visual. Restart: reset burnProgress, regenerate burn map, clear particles, recreate paper. Also auto-restart after a few seconds? Better to show "Đã cháy hết!" message and let user click button. Or auto loop. I'll add the button and also auto-restart after 4 seconds of completion for continuous demo... Let me just do button + message. Actually auto-restart makes a nicer demo. I'll do both: auto restart after 5s, plus button. Edge case: paper fully burned → particles stop spawning → remaining particles fade. Let me also draw the paper shadow on background for depth. Let me now also think about the burn starting point: fire typically starts at a point. Could start at bottom-center and spread. Radial distance from bottom center: threshold = distance from ignition point / maxDistance * 0.7 + noise * 0.3 Ignition at (cols/2, rows). Distance normalized by rows (height). That gives a circular spread which looks natural. But full bottom-edge ignition also looks good. Let me do ignition from bottom edge but slightly randomized, OR from a corner (dramatic diagonal burn). Corner ignition (bottom-right or bottom-left) looks really nice and dramatic. Let me do bottom edge with noise — simplest and reads clearly as "paper on fire". Actually, let me do the classic: ignite at bottom, whole edge catches quickly. I'll combine: base = (1 - y/(rows-1)) (0 at bottom, 1 at top), plus also horizontal noise. threshold = base*0.75 + noise*0.3 + small random per cell * 0.05 for jaggedness at fine scale. Fine per-cell random makes edges jagged/ash-like. Now code it fully. I'll be careful with performance: cols = ceil(380/5) = 76, rows = ceil(520/5) = 104 → 7904 cells. Iterating each frame with drawImage for visible cells — most cells visible early. ~7904 drawImages per frame might be heavy but modern browsers handle it. To be safe, use cell size 6: 64x87 ≈ 5568 cells. OK, use 6px. Hmm, let me use 5 for beauty; browsers can handle ~8k drawImage calls at 60fps generally. I'll use 5 but note performance. Alternatively pre-draw and use pixel manipulation... overkill. Keep drawImage approach with cell = 5. Actually, an optimization: only redraw cells near the burn front each frame... but the glow flicker needs updates only near front. Unburned cells are static — could cache. But simpler: draw everything each frame. Canvas drawImage of small regions is fast. Let's go. For spawn points along front: each frame, iterate cells, if cell is in glow zone and Math.random() < 0.3, spawn flame particle at cell position. Also compute front centroid for ambient glow. Smoke spawn: random from glow cells with lower probability, offset upward. Ember spawn: rare, from glow cells. Ash flakes: spawn from cells transitioning from char to gone (diff crossing CHAR boundary). Track per-cell "flaked" flag. Or spawn when 0.05 < diff < 0.15 with small probability. Flakes fall from charred zone. Ambient glow position: average of glow cells. Keep smoothed. Flicker: global flicker = 0.8 + Math.random()*0.4 or sin-based. Draw order per frame: 1. clearRect 2. Draw soft shadow under paper (only while paper mostly intact — scale alpha with remaining paper fraction). Compute remaining fraction occasionally. 3. Ambient orange glow (radial gradient at front centroid, 'lighter') 4. Cells: for each cell with diff < GONE: drawImage paper portion; if glow → overlay; if char → black overlay + maybe skip drawing near end. 5. Particles: flames & embers with 'lighter', smoke normal after. 6. If done: show text "Tờ giấy đã cháy thành tro..." fading in. Also draw glowing edge line: for cells exactly at front, their glow overlay flickers with time: alpha = 0.5 + 0.5*sin(time*10 + x). Charred cells crumble: as diff goes GLOW→GONE, overlay black, and near the end fade the cell entirely. Also draw cell slightly shrunk & offset downward? Simple: alpha fade on the black. Let me write final code now. Also the flames at the bottom of paper initially — since ignition at bottom edge, flames appear along the bottom. One more flair: draw a "fire line" using small triangles/arcs? Particles suffice. Paper initial: slight rotation for realism? Keep straight. Add wind? Slight sway of flames: vx += sin(time)*0.02. Message and button in Vietnamese since user speaks Vietnamese: - Title: "🔥 Tờ Giấy Đang Cháy" - Button: "🔥 Đốt tờ giấy mới" - End text: "Tờ giấy đã hóa thành tro bụi..." Let me write it all out: ```html 🔥 Animation Tờ Giấy Cháy

🔥 TỜ GIẤY ĐANG CHÁY 🔥

``` Now the JS in full: ```javascript const cv = document.getElementById('cv'); const ctx = cv.getContext('2d'); const W = cv.width, H = cv.height; const PAPER_W = 360, PAPER_H = 500; const PX = (W - PAPER_W) / 2; const PY = (H - PAPER_H) / 2 - 10; const CELL = 5; const COLS = Math.ceil(PAPER_W / CELL); const ROWS = Math.ceil(PAPER_H / CELL); const GLOW = 0.05; // glow zone width (progress units) const CHARW = 0.10; // char zone width const GONE = GLOW + CHARW; const SPEED = 1 / 620; // progress per frame (~10-11s burn) let paper, burnMap, particles, burnProgress, done, doneTimer, glowCenter; function makePaper() { ... } function makeBurnMap() { ... } function reset() { paper = makePaper(); burnMap = makeBurnMap(); particles = []; burnProgress = -0.15; done=false; doneTimer=0; } ``` burnProgress starts slightly negative so flames ramp up at the bottom edge? Actually if progress starts at 0, bottom cells (threshold ~0..0.05) immediately glow. Start at -0.05 for a beat. Fine. makePaper with text lines, title, seal, maybe a smiley? Keep document-like. Add "TÀI LIỆU MẬT" stamp? Cute: "TOP SECRET" style. Vietnamese: "TUYỆT MẬT". Add red stamp rotated. makeBurnMap: smooth value noise + vertical gradient + per-cell jitter. Particle classes or plain objects with type field — plain objects fine. Update loop with timestamp for flicker. Spawning: iterate all cells each frame to find front cells — that's 7.7k iterations, trivial. Collect front cells into array, then pick random ones for spawning; also accumulate centroid. Cap particles (e.g., 900) for perf. Draw flames: radial gradient per particle is expensive if many. Alternative: pre-render a flame sprite (offscreen canvas with radial gradient), tint via globalAlpha and hue? Can't tint easily. Use a few pre-rendered sprites: yellow core, orange, red — draw with drawImage scaled, composite 'lighter'. Pre-render 3 sprites of 64px. Then each flame particle draws sprite based on life. Much faster. Smoke: pre-render gray blob sprite, draw with alpha. Ember: small sprite, bright. Ash: just fillRect dark gray, rotated. Let me pre-render sprites: ```javascript function makeGlowSprite(colorInner, colorOuter) { const s = document.createElement('canvas'); s.width = s.height = 64; const c = s.getContext('2d'); const g = c.createRadialGradient(32,32,0,32,32,32); g.addColorStop(0, colorInner); g.addColorStop(0.4, colorOuter); g.addColorStop(1, 'rgba(0,0,0,0)'); c.fillStyle = g; c.fillRect(0,0,64,64); return s; } const flameSprites = [ makeGlowSprite('rgba(255,255,220,1)', 'rgba(255,200,80,0.6)'), // hot makeGlowSprite('rgba(255,220,120,1)', 'rgba(255,140,30,0.55)'), makeGlowSprite('rgba(255,160,60,1)', 'rgba(220,60,10,0.5)'), makeGlowSprite('rgba(200,60,20,0.9)', 'rgba(120,20,0,0.4)'), // cool ]; ``` Flame particle life 1→0; sprite index = floor((1-life)*3.99). Size shrinks as life decreases? Real flames: start big-ish at base... whatever looks fine: size = base * (0.5 + life*0.5). Smoke sprite: gray radial, draw with normal composite at low alpha (0.15*life), size grows. Ember sprite: reuse hot flame sprite at small size. Ash flakes: dark gray small rects falling with sway, slight rotation. Also fade. Now the cell rendering: ```javascript function drawPaper(t) { for (let y = 0; y < ROWS; y++) { for (let x = 0; x < COLS; x++) { const th = burnMap[y][x]; const diff = burnProgress - th; if (diff >= GONE) continue; // burned away const dx = PX + x*CELL, dy = PY + y*CELL; const sx = x*CELL, sy = y*CELL; const sw = Math.min(CELL, PAPER_W - sx); const sh = Math.min(CELL, PAPER_H - sy); if (diff < 0) { ctx.drawImage(paper, sx, sy, sw, sh, dx, dy, sw, sh); } else if (diff < GLOW) { // burning edge: paper + glow ctx.drawImage(paper, sx, sy, sw, sh, dx, dy, sw, sh); const k = diff / GLOW; // 0..1 const flick = 0.7 + 0.3 * Math.sin(t*0.02 + x*1.7 + y*2.3); ctx.fillStyle = `rgba(255,${Math.floor(140+80*flick)},30,${0.35 + 0.45*k*flick})`; ctx.fillRect(dx, dy, sw, sh); } else { // charred: black, shrinking & fading const k = (diff - GLOW) / CHARW; // 0..1 const sc = 1 - 0.45*k; const alpha = 1 - k*k; const w2 = sw*sc, h2 = sh*sc; ctx.globalAlpha = alpha; ctx.drawImage(paper, sx, sy, sw, sh, dx + (sw-w2)/2, dy + (sh-h2)/2, w2, h2); ctx.fillStyle = `rgba(15,10,8,${0.85})`; ctx.fillRect(dx + (sw-w2)/2, dy + (sh-h2)/2, w2, h2); ctx.globalAlpha = 1; } } } } ``` Hmm, mixing globalAlpha with fillRect rgba is fine. Actually for charred, simpler: fill black only (paper content charred beyond recognition) with slight shrink. Drawing image under black barely visible. I'll draw black rect shrunk with alpha — cheaper. But at the very start of char (k~0), it transitions from glow (paper visible) to black — slight pop, acceptable. Wait, actually better visual: keep a thin char zone. OK. Also cells exactly at the front: maybe glow zone partially transparent at inner edge... good enough. Also, the "curl" — skip. Ambient glow: ```javascript if (glowCenter) { ctx.globalCompositeOperation = 'lighter'; const flick = 0.75 + 0.25*Math.sin(t*0.013) + Math.random()*0.1; const R = 190*flick; const g = ctx.createRadialGradient(glowCenter.x, glowCenter.y, 10, glowCenter.x, glowCenter.y, R); g.addColorStop(0, 'rgba(255,140,40,0.30)'); g.addColorStop(0.5, 'rgba(255,90,20,0.12)'); g.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = g; ctx.fillRect(glowCenter.x-R, glowCenter.y-R, R*2, R*2); ctx.globalCompositeOperation = 'source-over'; } ``` Shadow under paper: before drawing cells: ```javascript ctx.save(); ctx.shadowColor... ``` Simpler: draw dark ellipse beneath paper with alpha depending on remaining fraction. Or a blurred rect behind: use shadowBlur once: ```javascript ctx.save(); ctx.shadowColor = 'rgba(0,0,0,0.6)'; ctx.shadowBlur = 30; ctx.fillStyle = 'rgba(0,0,0,0.35)'; ctx.fillRect(PX+8, PY+12, PAPER_W, PAPER_H); ctx.restore(); ``` That draws a solid dark rect — not good since it covers background uniformly... with alpha 0.35 it's a translucent dark rect behind paper — fine as drop shadow, offset slightly. But as paper burns, shadow stays — weird. Scale shadow alpha with remainingFraction. Compute remaining fraction = 1 - clamp(burnProgress / maxThreshold). Rough is fine. Actually shadow drawn BEFORE cells, cells cover it mostly; visible at offset edges. As paper disappears, shadow should fade. Multiply alpha by remainingFraction. Simpler: ctx.fillStyle rgba(0,0,0, 0.3*remaining). OK. Front detection & particle spawning: ```javascript function spawnAtFront(t) { let sx=0, sy=0, n=0; const frontCells = []; for (let y=0;y=0 && diff0) { glowCenter.x = PX + (sx/n)*CELL; glowCenter.y = PY + (sy/n)*CELL; // flames const spawnCount = Math.min(frontCells.length, 14); for (let i=0;i 900, skip. Ash flakes: iterate char zone cells, random small chance: Combine into same loop: if diff in char zone and Math.random()<0.002 → ash flake. Ember physics: rise fast, wiggle, tiny, additive. Flame update: ```javascript p.x += p.vx; p.y += p.vy; p.vy *= 0.98; p.vx += Math.sin(t*0.01 + p.seed)*0.03; p.life -= p.decay; ``` Smoke: vy -0.4..-1, grows. Ash: vy +0.3..0.8 (falls down), vx sway sin, rotation. Draw particles sorted? Draw flames first (lighter), then embers (lighter), then smoke (normal), then ash (normal). Keep separate arrays or single array drawn in type order via multiple passes. Use separate arrays: flames[], smokes[], embers[], ashes[]. Simpler to manage caps. Done state: when burnProgress > maxThreshold + GONE → done; show fading text overlay on canvas or HTML. Draw text on canvas with alpha ramp: "Tờ giấy đã cháy thành tro... 🔥" Actually message: "Đã cháy hết! Nhấn nút để đốt tờ giấy mới." Then auto-reset after ~4.5s. maxThreshold = 0.75 + 0.3 + 0.05 ≈ 1.10. Compute actual max when generating. Auto restart: doneTimer counts; at 280 frames → reset(). Also click on canvas restarts too? Button suffices. Let me also add subtle paper edge border (slightly darker outline) — draw in paper canvas: border rect stroke rgba(0,0,0,0.15). Text lines: wavy? Straight gray lines fine. Add a drawing: small heart or sun doodle? Add a red circle seal with star. Cute. Keep it document-like: title "GIẤY BÁO CHÁY" hmm. Title: "TÀI LIỆU TUYỆT MẬT", lines, red stamp "TUYỆT MẬT" rotated -20°, signature squiggle at bottom. Let me write the squiggle: bezier curve. Now assemble everything carefully. Watch out: drawImage with float args fine. Potential perf: 7.7k drawImages of 5x5 — let's reduce per-frame cost: skip cells where diff>=GONE quickly (continue), unburned cells drawImage. Early frames draw ~7.7k images... Each drawImage with 9 args of tiny region — Chrome handles ~10k+ per frame. OK. Alternatively CELL=6 → 60x84=5040 cells. Edges chunkier but still nice. I'll use CELL=5 and hope fine; mention performance-friendly. Actually, safer: CELL=6? The jagged ash edge looks good at 5. Modern browsers fine. Go 5. Flicker text on canvas for done message: ```javascript if (done) { doneTimer++; const a = Math.min(1, doneTimer/60); ctx.fillStyle = `rgba(255,180,90,${a})`; ctx.font = 'bold 26px Segoe UI'; ctx.textAlign='center'; ctx.fillText('Tờ giấy đã hóa thành tro bụi...', W/2, H/2); if (doneTimer > 300) reset(); } ``` Reset function regenerates everything. Ignition effect at start: burst of flames at bottom center when burnProgress crosses 0. Nice: when !ignited && burnProgress>=0 → spawn 40 flames along bottom edge. Also ambient: a few floating dust/embers in background always for mood? Light touch: slow rising faint embers from bottom of screen at all times (low rate). Adds atmosphere. Maybe skip to keep focus. Add tiny background embers only while burning. Fine — the front spawns enough. Wind: flames drift slightly left-right via sin(t). Included in vx update. Write final code. Also ensure canvas clears: ctx.clearRect each frame. Particles update removal: iterate backwards splice. Let me count sizes: flames each frame up to 14 spawn; life ~ 1/0.02 = 50 frames → up to 700 flames alive. That's a lot of drawImages with lighter comp — heavy. Reduce: spawn 6-9 per frame, decay 0.03 → ~33 frames → ~250 alive. Fine. Smoke: rate ~0.2 per frame via the else-branch... let me directly control: each frame 6 flame spawns, 1 smoke, 10% ember. Smoke life long: decay 0.006 → 166 frames ~ 2.7s, size grows 0.3/frame → big. Cap smokes at 120. OK writing final. ```javascript 'use strict'; const cv = document.getElementById('cv'); const ctx = cv.getContext('2d'); const W = cv.width, H = cv.height; /* ---------- Paper ---------- */ const PAPER_W = 360, PAPER_H = 500; const PX = (W - PAPER_W) / 2; const PY = (H - PAPER_H) / 2 - 14; const CELL = 5; const COLS = Math.ceil(PAPER_W / CELL); const ROWS = Math.ceil(PAPER_H / CELL); const GLOW = 0.05; const CHARW = 0.11; const GONE = GLOW + CHARW; const SPEED = 1 / 640; let paperCanvas, burnMap, maxTh; let burnProgress, ignited, done, doneTimer; let flames = [], smokes = [], embers = [], ashes = []; let glowCenter = {x: W/2, y: H/2}; let hasFront = false; /* sprites */ function makeSprite(stops) { const s = document.createElement('canvas'); s.width = s.height = 64; const c = s.getContext('2d'); const g = c.createRadialGradient(32,32,2,32,32,32); stops.forEach(([o,col]) => g.addColorStop(o,col)); c.fillStyle = g; c.fillRect(0,0,64,64); return s; } const flameSprites = [...]; const smokeSprite = makeSprite([[0,'rgba(120,120,120,0.55)'],[0.5,'rgba(90,90,90,0.28)'],[1,'rgba(60,60,60,0)']]); ``` Paper drawing function: ```javascript function makePaper() { const p = document.createElement('canvas'); p.width = PAPER_W; p.height = PAPER_H; const c = p.getContext('2d'); c.fillStyle = '#f7f2e4'; c.fillRect(0,0,PAPER_W,PAPER_H); // fibers for (let i=0;i<500;i++){ c.fillStyle = `rgba(120,100,60,${Math.random()*0.05})`; c.fillRect(Math.random()*PAPER_W, Math.random()*PAPER_H, 2, 1); } // border c.strokeStyle = 'rgba(0,0,0,0.18)'; c.lineWidth = 2; c.strokeRect(4,4,PAPER_W-8,PAPER_H-8); // title c.fillStyle = '#3a3a3a'; c.font = 'bold 26px Georgia, serif'; c.textAlign = 'center'; c.fillText('TÀI LIỆU TUYỆT MẬT', PAPER_W/2, 58); c.font = '13px Georgia, serif'; c.fillStyle = '#777'; c.fillText('— Không được phép sao chép —', PAPER_W/2, 82); // text lines c.strokeStyle = '#a9a293'; c.lineWidth = 2; c.lineCap = 'round'; for (let y=118; y end) seg = end - x0; c.beginPath(); c.moveTo(x0, y); c.lineTo(x0+seg, y); c.stroke(); x0 += seg + 8 + Math.random()*8; } } // signature squiggle c.strokeStyle = '#2c3e70'; c.lineWidth = 2; c.beginPath(); c.moveTo(PAPER_W-140, PAPER_H-78); c.bezierCurveTo(PAPER_W-120, PAPER_H-100, PAPER_W-100, PAPER_H-58, PAPER_W-80, PAPER_H-80); c.bezierCurveTo(PAPER_W-70, PAPER_H-92, PAPER_W-60, PAPER_H-70, PAPER_W-48, PAPER_H-76); c.stroke(); // red stamp c.save(); c.translate(PAPER_W/2 - 70, PAPER_H-72); c.rotate(-0.35); c.strokeStyle = 'rgba(200,40,30,0.8)'; c.lineWidth = 3; c.strokeRect(-58,-24,116,48); c.fillStyle = 'rgba(200,40,30,0.8)'; c.font = 'bold 20px Arial'; c.textAlign='center'; c.fillText('TUYỆT MẬT', 0, 7); c.restore(); return p; } ``` Burn map with smooth noise: ```javascript function makeBurnMap() { const gCols = 9, gRows = 11; const coarse = []; for (let y=0;y<=gRows;y++){ coarse[y]=[]; for(let x=0;x<=gCols;x++) coarse[y][x]=Math.random(); } const map = []; maxTh = 0; for (let y=0;ymaxTh) maxTh=th; } } return map; } ``` Reset: ```javascript function reset(){ paperCanvas = makePaper(); burnMap = makeBurnMap(); burnProgress = -0.08; ignited = false; done = false; doneTimer = 0; flames.length = smokes.length = embers.length = ashes.length = 0; hasFront = false; } ``` Particle factories: ```javascript function newFlame(x,y){ return {x, y: y-2, vx:(Math.random()-0.5)*0.6, vy:-(0.8+Math.random()*1.6), life:1, decay:0.025+Math.random()*0.02, size:10+Math.random()*16, seed:Math.random()*100}; } function newSmoke(x,y){ return {x, y, vx:(Math.random()-0.5)*0.3, vy:-(0.4+Math.random()*0.7), life:1, decay:0.004+Math.random()*0.004, size:12+Math.random()*14, seed:Math.random()*100}; } function newEmber(x,y){ return {x, y, vx:(Math.random()-0.5)*1.4, vy:-(1.5+Math.random()*2.2), life:1, decay:0.008+Math.random()*0.012, size:2+Math.random()*3, seed:Math.random()*100}; } function newAsh(x,y){ return {x, y, vx:(Math.random()-0.5)*0.5, vy:0.3+Math.random()*0.6, life:1, decay:0.004+Math.random()*0.005, size:3+Math.random()*4, rot:Math.random()*Math.PI*2, vr:(Math.random()-0.5)*0.1, seed:Math.random()*100}; } ``` Main loop: ```javascript let t=0; function loop(){ t++; ctx.clearRect(0,0,W,H); burnProgress += SPEED; if (!ignited && burnProgress >= 0){ ignited = true; for (let i=0;i<50;i++) flames.push(newFlame(PX+Math.random()*PAPER_W, PY+PAPER_H-4)); } // scan cells let sx=0, sy=0, n=0; const front = []; for (let y=0;y=0 && diff=GLOW && diff0; if (hasFront){ glowCenter.x += (PX + (sx/n)*CELL - glowCenter.x)*0.2; glowCenter.y += (PY + (sy/n)*CELL - glowCenter.y)*0.2; } ``` Wait front.push(x,y) pushes two elements — then reading pairs. Use object or flat array with stride. Use flat array and step by 2. Spawn: ```javascript if (hasFront && burnProgress < maxTh + GONE){ const fc = front.length/2; const flameN = Math.min(8, Math.ceil(fc/3)); for (let i=0;i maxTh + GONE + 0.05 && flames.length===0) { done = true; } ``` Hmm flames may persist ~1s. done triggers when progress past end and few particles left. Simpler: done when burnProgress > maxTh+GONE+0.02; then message shows while particles fade. doneTimer → auto reset after ~5s. Draw functions: ```javascript function drawPaperCells(){ for (let y=0;y=GONE) continue; const sx=x*CELL, sy=y*CELL; const sw=Math.min(CELL, PAPER_W-sx), sh=Math.min(CELL, PAPER_H-sy); const dx=PX+sx, dy=PY+sy; if (diff<0){ ctx.drawImage(paperCanvas, sx,sy,sw,sh, dx,dy,sw,sh); } else if (diff=0;i--){ const p=flames[i]; p.x+=p.vx + Math.sin(t*0.08+p.seed)*0.25; p.y+=p.vy; p.vy*=0.985; p.life-=p.decay; if (p.life<=0) flames.splice(i,1); } // smoke for (let i=smokes.length-1;i>=0;i--){ const p=smokes[i]; p.x+=p.vx+Math.sin(t*0.02+p.seed)*0.3; p.y+=p.vy; p.size+=0.35; p.life-=p.decay; if(p.life<=0) smokes.splice(i,1); } // embers for (let i=embers.length-1;i>=0;i--){ const p=embers[i]; p.x+=p.vx+Math.sin(t*0.15+p.seed)*0.6; p.y+=p.vy; p.life-=p.decay; if(p.life<=0) embers.splice(i,1); } // ashes for (let i=ashes.length-1;i>=0;i--){ const p=ashes[i]; p.x+=p.vx+Math.sin(t*0.05+p.seed)*0.5; p.y+=p.vy; p.rot+=p.vr; p.life-=p.decay; if(p.life<=0 || p.y>H+20) ashes.splice(i,1); } } ``` Ambient glow drawn before paper cells? Glow behind paper → draw after clear, before cells. Also a glow over the front after cells for intensity. The cell glow overlays handle edge brightness. Draw ambient behind. Shadow: remaining fraction est: `const remain = Math.max(0, Math.min(1, 1 - burnProgress/(maxTh)));` Order in loop: 1. clear 2. update burnProgress, ignite 3. scan front (needed for glowCenter and spawning) — do scan, spawn 4. draw shadow 5. draw ambient glow (lighter) 6. drawPaperCells 7. updateParticles 8. drawFlames/embers (lighter), smoke, ash 9. done check + message + auto reset requestAnimationFrame(loop). Button: reset(). Edge: front array as flat — front.push(x, y). Reading: front[idx], front[idx+1] where idx even. fc = front.length/2. idx = (Math.random()*fc|0)*2 ✓. Also at very start (burnProgress negative), no front → no particles, paper intact. Good, brief calm before ignition. Ignition burst at 0. One more consideration: `front.push(x,y)` — with 7.7k cells and front being maybe a few hundred — fine. Ambient glow should also subtly light the paper: drawn behind, so only outside edges glow. Add second pass: after cells, draw same gradient with 'lighter' low alpha 0.1 to wash over paper edge area. Let me draw ambient twice: before (behind, alpha strong) and a soft one after cells? The after-pass would brighten paper near flames — realistic. Use low alpha 0.12. OK also viewport: canvas 760x640 fixed; fine on desktop; add max-width CSS for small screens: canvas { max-width: 96vw; height: auto; } — canvas scales via CSS. Good. Now write the final HTML file completely and cleanly, with comments in Vietnamese for friendliness. Keep code tidy. Double-check sprite usage: flameSprites array indices 0..3, li from (1-life)*4|0: life=1 → 0 (hottest white-yellow); life→0 → 3 (dark red). Good since flames cool as they rise/die. Sprite stops: 0: [[0,'rgba(255,255,230,1)'],[0.35,'rgba(255,230,140,0.85)'],[0.7,'rgba(255,180,60,0.35)'],[1,'rgba(255,150,0,0)']] 1: [[0,'rgba(255,235,160,1)'],[0.4,'rgba(255,180,70,0.8)'],[0.75,'rgba(255,120,20,0.3)'],[1,'rgba(255,100,0,0)']] 2: [[0,'rgba(255,190,90,1)'],[0.45,'rgba(255,120,30,0.75)'],[0.8,'rgba(220,70,10,0.3)'],[1,'rgba(200,50,0,0)']] 3: [[0,'rgba(230,110,40,0.95)'],[0.5,'rgba(180,60,15,0.6)'],[0.85,'rgba(120,30,5,0.25)'],[1,'rgba(80,20,0,0)']] Ember sprite: small bright: makeSprite([[0,'rgba(255,240,200,1)'],[0.3,'rgba(255,180,80,0.9)'],[1,'rgba(255,100,0,0)']]). Smoke sprite: as above. Everything checks. Also `ctx.lineCap='round'` on paper lines. Done message styling: also small subtext "Nhấn nút bên dưới để đốt tờ giấy mới 🔥". And auto-reset at doneTimer>330. Let me make sure the fire visually starts at the bottom of the paper and burns upward — base = 1 - y/(ROWS-1): at y = ROWS-1 (bottom row) base = 0 → threshold ≈ noise*0.28 → burns first ✓; at y=0 (top), base=1 → threshold≈0.72+noise → last ✓. maxTh ≈ 1.04. Burn duration: from -0.08 to ~1.10 at SPEED 1/640 → 1.18*640 ≈ 755 frames ≈ 12.6s at 60fps. Nice and watchable. Maybe slightly faster: SPEED = 1/560 → ~11s. Use 1/600 → ~12s total with fade. OK SPEED=1/600. Full code assembly now. I'll add brief Vietnamese comments. Response should be the code block plus a short description. The system prompt says don't mention the iframe. Provide the complete HTML in one code block. Also mention features briefly in Vietnamese (user speaks Vietnamese). Keep explanation short and put code in one block. One more check — `front` array re-created each frame: allocation churn fine. Also `glowCenter` when no front (end): keep last position, ambient glow fades because we gate drawing ambient on hasFront or particles presence. If !hasFront, skip ambient. Also background ember ambience: skip. Final answer structure: 1-2 sentences + code block + short bullet list of features/customization. In Vietnamese. Đây là file HTML hoàn chỉnh với animation tờ giấy cháy — có lửa, khói, than hồng, tro bay và mép giấy cháy đen lan dần lên: ```html 🔥 Animation Tờ Giấy Cháy

🔥 TỜ GIẤY ĐANG CHÁY 🔥

``` **Các hiệu ứng có trong animation:** - 🔥 Mép giấy **rực sáng cam-đỏ** nhấp nháy, lan từ dưới lên theo đường không đều (dùng noise) - ⬛ Vùng giấy **cháy đen, co lại rồi tan biến** như thật - 🎇 Hạt lửa bay lên với ánh sáng cộng dồn, **than hồng** lấp lánh, **khói xám** bốc lên và **mảnh tro** rơi lả tả - 💡 Hào quang cam chiếu sáng quanh mép lửa, bóng đổ mờ dần khi giấy cháy hết - 🔁 Nút **"Đốt tờ giấy mới"** + tự động chạy lại sau khi cháy hết **Tùy chỉnh nhanh:** đổi `SPEED` để cháy nhanh/chậm, `CELL` nhỏ hơn để mép cháy mịn hơn, hoặc sửa nội dung trong `makePaper()`. Chỉ cần lưu thành file `.html` và mở bằng trình duyệt!

HtMl