# 28 Phong Cách Animation Đẹp Với Claude Code & Remotion Khám phá 28 phong cách animation sáng tạo với Claude Code và Remotion, từ bản đồ 3D, giao diện kính mờ, biểu đồ động đến typography nghệ thuật. Bài viết tổng hợp đặc điểm, ứng dụng thực tế và hướng dẫn sử dụng AI để tạo những video chuyển động ấn tượng mà không cần thành thạo phần mềm dựng phim chuyên nghiệp. Tác giả: Hùng Hiền Hòa # 28 phong cách Animation đẹp mắt có thể tạo bằng Claude Code và Remotion – Kèm prompt để sao chép Bạn đã bao giờ xem một video với bản đồ 3D chuyển động, biểu đồ tăng trưởng cực mượt, hiệu ứng chữ như tạp chí hay sản phẩm tự tách thành từng linh kiện và tự hỏi: **Làm thế nào để tạo ra những chuyển động này?** Trước đây, câu trả lời thường là Adobe After Effects, Blender hoặc các phần mềm dựng phim chuyên nghiệp. Nhưng giờ đây, với sự hỗ trợ của AI, chúng ta có thể bắt đầu từ một đoạn mô tả bằng ngôn ngữ tự nhiên. Mình vừa tìm hiểu một bộ tài liệu khá thú vị mang tên *Animation styles you can build with Claude*, tổng hợp **28 phong cách animation** khác nhau, từ thiết kế tối giản, đồ họa 2D cho đến các chuyển động 3D phức tạp. Điều mình thích ở bộ tài liệu này là mỗi phong cách đều có công thức thiết kế khá rõ ràng: màu sắc, font chữ, bố cục, cách chuyển động và cả những điều nên tránh. Dưới đây là **28 phong cách Animation kèm prompt tiếng Anh** để bạn có thể tham khảo, sao chép và sáng tạo những video của riêng mình. --- ## Thư viện 28 phong cách Animation – Prompt có thể sao chép ### 01. Glow Orb – Quả cầu ánh sáng **Hiệu ứng:** Một quả cầu ánh sáng hồng trắng nằm giữa nền tối, chuyển động nhẹ như đang hít thở. Những đường tròn mảnh trôi chậm tạo chiều sâu. **Phù hợp:** Intro video, câu nói truyền cảm hứng, nội dung tối giản và video mang cảm xúc. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: calm, minimal 2D. Near-black warm ground. One glowing orb above centre: pink fading to white, a thin bright rim, a deep rose halo that dies out before the corners. Render the glow with dither so it never bands. Six or seven thin white outline circles at different depths drift with parallax as the view pushes gently toward the orb. Under the orb, one line in a clean geometric sans: "[YOUR LINE]". Motion: the orb takes one deep breath on a spring with about 10% overshoot, then breathes slowly. The text rises letter by letter out of a mask while its spacing tightens. Near the end the orb exhales and its rim lifts off as one ring that settles into an orbit. No fades, no particles, keep the bottom fifth empty. ``` --- ### 02. Frosted Glass UI – Giao diện kính mờ **Hiệu ứng:** Một thanh tìm kiếm trong suốt xuất hiện trên nền mờ, tự nhập văn bản và mở ra danh sách kết quả. **Phù hợp:** Giới thiệu công cụ AI, ứng dụng, website và giao diện tìm kiếm. **Prompt:** ``` Build a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a frosted-glass UI style. Background: a defocused dusk photo drawn procedurally in a shader, with a teal-to-navy sky, a coral horizon glow, rose and teal colour fields, a cluster of small out-of-focus city lights, darker blurred corners, fine grain and dither so nothing bands. Over it sits a wide frosted-glass search bar. Its glass is the same background redrawn with a much bigger blur, slightly smoked, with a bright top-left rim, a faint inner glow and a soft shadow. It types "[YOUR QUERY]" in Plus Jakarta Sans. Then the bar glides up and a matching glass panel unfolds beneath it. Three rows, "[ROW 1]", "[ROW 2]" and "[ROW 3]", drop in with a stagger and overshoot. A highlight stretches to one row and selects it. Use springs, no fades, and hold the final second. ``` --- ### 03. Apple One-Take – Chuyển cảnh liền mạch **Hiệu ứng:** Một chấm nhỏ biến thành nút bấm, nút biến thành thẻ thông tin, thẻ biến thành điện thoại và cuối cùng thành dòng chữ. **Phù hợp:** Ra mắt sản phẩm, giới thiệu tính năng và video công nghệ cao cấp. **Prompt:** ``` Make a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in an Apple keynote "one-take" style. Use a flat light ground (#EEEEEC), near-black ink, one red accent dot and Inter Tight. It's one continuous shot with no cuts and no fades. A red dot grows a black pill button labelled "[BUTTON WORD]" and a pointer presses it. The pill opens into a white card showing [CARD CONTENT], the card grows a bezel and becomes a phone with a tiny UI for [YOUR PRODUCT]. Then the camera pulls back and the phone's outline closes into the "O" of a short closing line like "[YOUR LINE]", while the red dot flies in as the full stop. Every state morphs out of the last, with springs at about 10% overshoot, speed-based motion blur, soft layered shadows and a one-second hold. ``` --- ### 04. Retro CRT Glow – Màn hình cổ điển **Hiệu ứng:** Màn hình CRT bật sáng từ một đường ngang, sau đó hiện chữ với ánh sáng phosphor và những đường quét cổ điển. **Phù hợp:** Video retro, công nghệ cũ, gaming hoặc nội dung mang cảm giác hoài niệm. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like an old CRT television switching on. Use a dark blue-black tube with slight barrel curvature, a vignette into the rounded edges, fine scanlines that follow the curve, light snow, a faint glass sheen. Frame one is a bright horizontal line across the middle. It splits into two edges that race apart, and the picture unfolds between them, overshooting slightly, then settling. The picture is "[YOUR WORDS]" in a wide, bold retro-futurist capital face on two lines, with a white-hot core and a warm rose-coral phosphor bloom in three layers. Dither the bloom so it never bands. Underneath, one short line of system text types in behind a block cursor. Hold 2 seconds under a slow rolling hum bar, then collapse back to the line so it loops. No neon, no borders, keep the bottom fifth empty. ``` --- ### 05. Oscilloscope – Sóng điện biến thành chữ **Hiệu ứng:** Một đường sóng điện màu xanh liên tục thay đổi hình dạng, cuối cùng biến thành dòng chữ. **Phù hợp:** Intro công nghệ, âm nhạc, điện tử và nội dung kỹ thuật. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like an oscilloscope. Dark green-black screen with a faint graticule grid that fades out toward the edges, no border. One bright green phosphor trace with an almost white core, a soft green glow and a short persistence trail of the previous few frames. The trace is ONE continuous line the whole time: it starts as a scrolling sine wave that locks, folds into a slowly turning Lissajous figure, releases back into a wave that rings down to a flat line, then the words "[YOUR WORDS]" rise out of that line left to right as thin capitals standing on the trace, each letter overshooting slightly before it settles. Hold the finished word for the last 1.5 seconds. Optional: one tiny instrument readout. No fades, no corner labels, keep the bottom fifth empty. ``` --- ### 06. Magazine Layout and Note – Tạp chí chuyển động **Hiệu ứng:** Một trang tạp chí được dựng lên với hình ảnh, văn bản và những ghi chú bằng bút đỏ. **Phù hợp:** Storytelling, giới thiệu sách, nhiếp ảnh, thời trang và nội dung biên tập. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like a printed magazine page building itself. Cool off-white paper, fine static grain. A thin rule at the top, then a two-line headline in Bodoni Moda (second line italic, indented): "[YOUR HEADLINE]". Below it a photo block on the left (use my image, or paint a duotone dusk sea with a sun disk and grain) and a narrow column of small Newsreader body text on the right. Each line rises out of its own mask with about 10% overshoot; the photo opens upward while it settles from a slight push. Then a red ballpoint note in La Belle Aurore writes itself in the margin, following each letter's strokes at real handwriting speed: "[YOUR NOTE]". Finish with a hand-drawn arrow with a small loop pointing into the photo. No fades, hold the last 1.5 seconds, bottom fifth empty. ``` --- ### 07. Blue Editorial – Typography nghệ thuật **Hiệu ứng:** Những dòng chữ trắng trên nền xanh điện được phóng to, cắt thành nhiều lớp và ghép lại thành bố cục tạp chí. **Phù hợp:** Video tiêu đề, thông điệp thương hiệu, quảng bá sự kiện. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a blue editorial magazine-cover style. Flat electric blue background #2433F0, white type, all lowercase, only two fonts: Instrument Serif Italic huge, Schibsted Grotesk Black small. Thin white rules at 55% opacity. My line is "[YOUR LINE]": split it into four parts, alternating small grotesk and huge italic words, stacked like a cover with the big words breaking the rules. Motion: letters rise through a baseline mask with overshoot; the first word starts huge then snaps down to a small kicker with motion blur; a slanted wipe with a thin line on its edge reveals the next word; one word slides out from under another; the last word arrives as four horizontal slices that land off-register, then lock. Fast, confident, short holds between beats, 1.5-second hold at the end. No fades, no glow, keep the bottom fifth empty. ``` --- ### 08. Risograph – Poster in hai màu **Hiệu ứng:** Poster với hai lớp màu hồng và xanh, họa tiết hạt mực và những chuyển động như được in từng lớp. **Phù hợp:** Poster sự kiện, âm nhạc, quảng cáo sáng tạo. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like a two-colour risograph poster printing itself. Use cool off-white paper and two inks, fluorescent pink and medium blue, that multiply into deep violet where they overlap. Draw each ink as its own plate. Print each plate with mottled grain, paper-white specks, ragged edges, halftone dots for any tone (a different screen angle per ink) and a few pixels of misregistration between the plates. Animate on twos, re-rolling the grain on every drawing. Build the poster from "[YOUR WORDS]" in a heavy grotesque, plus two overlapping circles, a diagonal stripe band and a dot ramp. Each element either stamps in big with a slight tilt and settles, or slides in with a small overshoot. Halfway through, slip the plates apart and spring them back. No smooth motion, no blur, keep the bottom fifth empty. ``` --- ### 09. Swiss Grid – Bố cục Thụy Sĩ **Hiệu ứng:** Các đường lưới, khối màu đỏ, hình tròn và chữ đậm được sắp xếp theo hệ thống hình học. **Phù hợp:** Video thiết kế, tuyên ngôn thương hiệu và phong cách tối giản. **Prompt:** ``` Build a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in the Swiss International Typographic Style. Paper #F0F0E8, ink #101010, one signal-red field #F03820, nothing else. A four-column modular grid of thin 2px lines draws itself first (already drawing on frame one). A black circle steps cell to cell on crisp springs with motion blur. A red field opens out of the cell it stops in, snapping edge by edge onto grid lines. Then my line, "[YOUR LINE, split into 3 short rows]", in Public Sans ExtraBold, tight tracking, flush-left: each row is pushed out of the left margin line along its row, overshoots about 8% and locks with its baseline on a grid line. Small numbered captions drop from a grid line as each part lands. No fades, gradients or glow. Keep text inside x 110-970 and y 230-1430, then hold the final poster for 2 seconds. ``` --- ### 10. Pencil to Blueprint – Phác thảo thành bản vẽ kỹ thuật **Hiệu ứng:** Một bản vẽ tay bằng bút chì dần biến thành bản vẽ kỹ thuật màu xanh với các đường kích thước. **Phù hợp:** Thiết kế sản phẩm, kiến trúc, cơ khí và kỹ thuật. **Prompt:** ``` Make a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion. Open on off-white graph paper (#ECECE6, faint blue grid) with a graphite pencil line (#25262B) already sketching [YOUR OBJECT] large, in side view. Draw light construction lines first, then doubled, slightly wobbly outlines with overshooting ends, then a few hatch strokes. At about 1.7 seconds, blueprint blue (#1C4C8F) floods out from the drawing with an irregular wet edge and a darker tide line. Where the edge passes, each pencil line turns crisp white and springs straight, and construction lines become dash-dot centre lines. Then two or three dimension lines draw in with arrowheads, and their numbers tick up. Finally the label "[YOUR 3-5 WORDS]" rises in Barlow Semi Condensed caps above a thin rule. Keep it one drawing throughout, with no cuts or fades. Keep text inside x 110-970 and y 230-1430, and hold the end for 1.5 seconds. ``` --- ### 11. 3D Map Route – Bản đồ chỉ đường 3D **Hiệu ứng:** Camera di chuyển từ mặt đường lên cao để hiển thị tuyến đường màu xanh, ghim vị trí đỏ và thông tin hành trình. **Phù hợp:** Du lịch, giới thiệu địa điểm, đường đến cửa hàng hoặc logistics. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a real 3D phone maps app shot. Make an invented city of low pale grey blocks (one to three storeys, so nothing hides the route) on a street grid, with a river, a few parks with round trees and one pale yellow main road, soft sun shadows and distant haze. Start low behind a small blue location dot with a white rim, looking up the street with the city ahead. While the camera rises, backs away and settles on a high view looking down at about 55 degrees, a thick blue route with a white casing draws along the streets to the destination, drawn on top so buildings never hide it. Add three small place labels in open ground, off the route. A red pin drops in with a small squash, then the label "[YOUR PLACE]" snaps in. A white trip card springs up with "[MINUTES] min", "[DISTANCE]" and a blue Go button, and the minutes count down like an odometer to the final number. Everything springs or eases, nothing fades, and it holds for the last second. ``` --- ### 12. Exploded Teardown – Tách lớp cấu tạo sản phẩm **Hiệu ứng:** Sản phẩm 3D được tách thành các lớp linh kiện, mỗi bộ phận có đường chỉ dẫn và thông số. **Phù hợp:** Review công nghệ, giải thích cấu tạo, giới thiệu thiết bị. **Prompt:** ``` Build me a 5-second, 9:16 exploded-view teardown (1080x1920, 30 fps) in Remotion, using a real 3D scene. The product is [YOUR PRODUCT], modelled as 4 to 6 simple layers with believable materials and lit like a studio shot with soft shadows, on a dark graphite background with a soft glow (dither it so it never bands). Frame one shows it assembled and centred. The camera pulls back and left while the layers lift apart from the top down, one every 10 frames, each on a fast spring with about 10% overshoot and real motion blur. As each layer lands, a thin grey leader line draws from a dot on its edge to a label on the right: an orange two-digit number, the part name in IBM Plex Sans and a short spec in IBM Plex Mono. The camera orbits about 10 degrees overall. Last, "[YOUR TITLE]" builds bottom left under a short orange bar. No fades. Keep the bottom fifth empty. ``` --- ### 13. Ink Wash – Tranh thủy mặc **Hiệu ứng:** Những dãy núi, cây, dòng sông và mặt trời tự vẽ lên giấy bằng hiệu ứng mực loang. **Phù hợp:** Video văn hóa, du lịch, nghệ thuật hoặc mở đầu câu chuyện. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a Chinese ink-wash landscape that paints itself onto warm rice paper (#EEEAE0) in black ink (#1B1A18), with one red (#B8352A) for a small sun (about 8% of the frame width) just above the far peaks, and a square seal. Draw it procedurally on a canvas, redrawn from the frame number: - three mountain ranges, each paler with distance, fading into mist - a dry-brush cliff with a pine - a small boat on a river of thin strokes Ink must spread, never fade. Reveal washes behind a ragged, noisy edge with a darker wet band behind it, and grow every stroke along its path. Bloom the sun from its centre with a wet edge and a slight overshoot. Brush on "[YOUR TITLE]" vertically in wide-tracked small caps in the empty sky, with "[YOUR SUBTITLE]" in italic beside it. Stamp the seal last and hold for a second. Keep it light: at least half the frame is empty paper, the river fills the lower third, and the bottom fifth stays calm. ``` --- ### 14. Paper Desk – Tài liệu trên bàn làm việc **Hiệu ứng:** Các tài liệu rơi xuống bàn, được dán băng keo, khoanh tròn và đánh dấu những thông tin quan trọng. **Phù hợp:** Video phân tích, kể chuyện, trình bày bằng chứng và báo cáo. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a Johnny Harris style "evidence on the desk" look, shot top-down over a green cutting mat (#2D684C) with a fine cream grid. On it: - a printed chart sheet showing [MY STAT OR CHART] - a printed quote sheet with [MY QUOTE], in Libre Caslon Text on off-white paper (#F4F2EC) with grain and real two-layer shadows - a white cut-out label reading "[MY LABEL]" in Inter Tight ExtraBold Give every piece of paper a height. It slides in from off-frame lifted, then falls and lands with weight: the shadow snaps tight, it makes a tiny hop, and its rotation overshoots and settles. Slap masking tape over the corners. Then draw a red marker circle around the key point, write "[MY NOTE]" letter by letter in Permanent Marker, draw an arrow, and sweep a yellow highlighter across the key sentence line by line. Add a slow handheld push-in with a tiny jolt on each landing, light film grain, and a one-second hold at the end. ``` --- ### 15. Headline Highlight – Đánh dấu bài báo **Hiệu ứng:** Một bài báo xuất hiện trong không gian 3D, camera tiến vào đoạn quan trọng và bút nhớ dòng đánh dấu nội dung. **Phù hợp:** Tin tức, video phân tích, bình luận và trình bày nguồn thông tin. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a news article being highlighted, like the "receipts" shots in commentary videos. Invent a newspaper called [MY MASTHEAD] with the headline "[MY HEADLINE]" and the paragraph "[MY PARAGRAPH]". Set it in Newsreader on off-white paper (#FCFCFA), Inter for the date, nav and byline, over a near-black wall of blurred, drifting article cards. Fly the article in from the bottom corner on a 3D tilt with light motion blur, landing on a heavy spring so its tilt sways past rest and settles. Push the camera toward the paragraph like a dolly: slow start, long glide, soft landing. Sweep a lime highlighter (#C9F52A) across "[MY KEY SENTENCE]" line by line, with rough edges, faint streaks, a chisel end and multiply blending. About 0.4 s later, pop in a quoted post saying "[MY POST]" with an overshoot. Hold the last second. ``` --- ### 16. Stat Chart – Biểu đồ tăng trưởng **Hiệu ứng:** Một con số lớn tăng theo đường biểu đồ, kết hợp đánh dấu thời điểm xảy ra sự kiện quan trọng. **Phù hợp:** Báo cáo kinh doanh, thống kê, doanh thu và tài chính. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a business-documentary stat graphic. Use my company [MY COMPANY], my metric "[MY METRIC LABEL]", and my data: [MY MONTHLY VALUES], ending on [MY FINAL NUMBER]. The key event is "[MY EVENT]" in [MONTH YEAR], with the line "[ONE-LINE IMPACT]" and a delta chip of "[MY % CHANGE]". Near-black background (#0A0B0D), white Inter Tight, data labels in IBM Plex Mono caps, one accent: orange #FF5B1F. A huge tabular-figure counter shows the value under the line's tip as the line draws left to right, a small dot leading and the fill following. At the event the line turns orange, a ring marker pops on, a leader line draws up and the callout snaps in. When the count lands, pop the chip with a small overshoot, then ping the end point and hold the last second. ``` --- ### 17. App Mockup – Giới thiệu ứng dụng 3D **Hiệu ứng:** Một chiếc điện thoại xoay trong không gian, giao diện hoạt động trên màn hình và những thẻ thông tin nổi lên xung quanh. **Phù hợp:** Giới thiệu ứng dụng, phần mềm, sản phẩm SaaS. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a premium app-launch shot for [MY APP NAME]. One phone in CSS 3D on a soft blue-grey backdrop with a floor shadow, running my app's home screen built as real UI: [MY MAIN NUMBER], a small chart and three list rows: [MY 3 ROWS]. Plus Jakarta Sans, near-black ink, one accent [MY BRAND COLOUR], white cards. On frame 0 the phone is already in frame at a steep angle and springs round to a three-quarter view with weight and a slight overshoot. The screen builds as it lands: the number counts up on tabular figures, the chart draws, the rows rise in. Then three floating cards pop in one at a time, each morphing out of a pill, chip or disc, never fading: [CARD 1], [CARD 2], [CARD 3]. Then a gentle parallax float; hold the last second. ``` --- ### 18. Screen-Recording Zoom – Phóng to thao tác **Hiệu ứng:** Camera tự động phóng vào nút bấm, con trỏ thực hiện thao tác và hiển thị bước hướng dẫn. **Phù hợp:** Video hướng dẫn sử dụng phần mềm, website và công cụ AI. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in the style of a polished screen-recording tutorial. Recreate this screen from my product as a real, crisp interface (not a screenshot): [DESCRIBE MY APP SCREEN]. The step is "[STEP NUMBER] · [MY STEP, e.g. Click Publish]" and the target is the [MY BUTTON] button. Dark app window with a deep soft shadow, floating on a pale mint backdrop with fine grain. Inter for the interface, one blue accent for the primary button. Frame one shows the whole window. The cursor glides on a gentle curve to the button while the camera zooms about 2x toward it on one smooth spring, with real motion blur during the move and sharp text at rest. On the click, the button presses to 95%, and a white ring springs out. Then a white step pill pops in and the shot holds. ``` --- ### 19. Timeline – Dòng thời gian 3D **Hiệu ứng:** Camera di chuyển qua những mốc thời gian, từng thẻ sự kiện dựng lên và kết thúc ở thời điểm hiện tại. **Phù hợp:** Hành trình cá nhân, lịch sử thương hiệu và tổng kết dự án. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a 3D-floor timeline telling [MY STORY]. Headline: "[MY HEADLINE]". Kicker: "[MY NAME] · [START YEAR] TO NOW". Milestones (3 or 4): [YEAR, SHORT TITLE, ONE LINE]. The last one is the NOW card. Look: an off-white perspective floor with a faint grid, ink #0E1116, one blue accent #2442F5, Schibsted Grotesk with JetBrains Mono labels. The line runs diagonally toward the viewer, years painted flat on the floor beside it. Milestones are white thumbnail cards on thin stems; the last is solid blue with a black "NOW" pill. Motion: the camera starts low near the first year and travels toward now on one eased move. The blue fill and its playhead lead, and each card hinges up with a small overshoot as the playhead passes its year. The NOW card lands last, then hold the final second. ``` --- ### 20. Globe Arcs – Quả địa cầu và tuyến đường **Hiệu ứng:** Những đường cung màu cam nối các quốc gia trên quả địa cầu dạng chấm, kết hợp số liệu tăng theo từng điểm đến. **Phù hợp:** Mạng lưới quốc tế, logistics, du lịch và thị trường toàn cầu. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion using a real 3D scene: a dark data globe. Draw the land as tens of thousands of tiny off-white dots placed only on land (use free world land outlines), on a dark navy ocean sphere with only a thin, soft blue rim line (no glow halo), over a deep navy background falling to near black (dithered, no banding). The globe turns about 40 degrees while the camera pushes in a little, both easing to a stop by 4 seconds. From [YOUR CITY], orange arcs fly out one after another to [YOUR DESTINATIONS] (only ones on the side facing the camera), higher for longer trips, each landing with one thin ring rippling out and a white pin. Above the globe, a small mono caps label "[YOUR LABEL]" and a big "[YOUR NUMBER] [YOUR UNIT]" that steps up on each landing and reaches the final number with the last arc. No fades, and the last second is completely still. ``` --- ### 21. Laptop Reveal – Laptop giới thiệu website **Hiệu ứng:** Một chiếc laptop kim loại mở nắp, trang web hiện ra và các thao tác trên giao diện được thực hiện tự động. **Phù hợp:** Giới thiệu website mới, ứng dụng web, sản phẩm kỹ thuật số. **Prompt:** ``` Build me a 5-second, 9:16 laptop reveal (1080x1920, 30 fps) in Remotion, using a real 3D scene. A modern silver laptop with rounded edges, a black glass bezel and dark keys sits on a soft light-grey studio sweep (dithered so it never bands), with real reflections in the metal and glass, a matte floor (not a mirror) and a soft contact shadow. On frame one the lid is a quarter open, seen low from three-quarters, camera already moving. The lid springs open with a small overshoot as the camera orbits to the front, landing around one second. As it opens, the screen fades on through a soft blur, sharp as it lands, to a landing page for [YOUR PRODUCT]: headline "[YOUR HEADLINE]", one button "[YOUR BUTTON]", a product picture below. The page scrolls one section, a cursor clicks the button (it presses and springs back), then "[YOUR PRODUCT NAME]" and "[YOUR SHORT LINE]" rise in, centred under the laptop, which ends large and centred. Hold still for the last second. Nothing else fades, no glows. ``` --- ### 22. Isometric Flow – Quy trình mô hình 3D **Hiệu ứng:** Những tòa nhà nhỏ và con đường được dựng theo từng bước, kết hợp phương tiện di chuyển minh họa một quy trình. **Phù hợp:** Giải thích quy trình sản xuất, chuỗi cung ứng, vận hành kinh doanh. **Prompt:** ``` Build me a 5-second 9:16 animation (1080x1920, 30 fps) in Remotion with a real 3D scene and an orthographic isometric camera: a miniature diorama explaining [YOUR PROCESS] in three steps, [STEP 1], [STEP 2] and [STEP 3]. Use a rounded white slab on a soft off-white background, a dark road with a dashed white centre line zig-zagging across it, and one toy-like building per step (rounded blocks in mint, blue and coral, white roofs, slate details) under a soft sun. The buildings rise out of the ground one by one with a small hop and a crisp landing, then a white label pops above each: blue number chip, step name, grey time. The centre line draws on, a van carries [WHAT MOVES] to the last step and settles with a bounce, and that step's number turns into a green check. Title: "[YOUR TITLE]". Nothing fades. Hold the last second still. ``` --- ### 23. Notification Stack – Thông báo đơn hàng **Hiệu ứng:** Các thông báo đơn hàng liên tục đổ về, đẩy những thông báo cũ xuống và khiến tổng giá trị tăng dần. **Phù hợp:** Video bán hàng, ra mắt sản phẩm và minh họa sự phát triển kinh doanh. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a phone lock screen full of order notifications for [MY SHOP OR APP], no phone frame. Dark, soft blue and teal wallpaper, dithered so it never bands. A date, a big time, then a frosted bar with my app icon, "Today", an order count and a running total starting at [MY TOTAL]. Under it, frosted cards with my icon, my app name, "now" and "New order: [AMOUNT] · [N] items". Frame one already shows the time, the bar and one card. New cards drop in from above on a quick spring with a small overshoot, pushing the older ones down: every 9 frames at first, then every 4. From the fifth card on, the oldest tuck behind into a smaller, darker stack. The total's digits roll up on every arrival. Then a "+[N] more" pill pops in, and the last second holds still. ``` --- ### 24. Before and After Slider – So sánh trước và sau **Hiệu ứng:** Thanh trượt di chuyển qua hai phiên bản của một thiết kế, thể hiện sự thay đổi giữa trước và sau. **Phù hợp:** Thiết kế lại website, chỉnh sửa ảnh, cải tạo không gian hoặc nâng cấp giao diện. **Prompt:** ``` Build me a 5-second, 9:16 before-and-after slider (1080x1920, 30 fps) in Remotion for [MY BUSINESS AND WHAT CHANGED, e.g. a bakery website redesign]. A headline "[MY TWO-LINE HEADLINE]" sits above one big browser window with a soft layered shadow, on a pale cool grey dithered background. Inside, draw two complete versions of the same page as real text and shapes: an old, dated one and a modern one in warm white with ink text and one accent colour. The new one sits on top and is revealed by a vertical wipe, with a white divider and round handle holding two arrows. Lay each version out so its key words sit on its own side of the middle, so the final 50/50 split reads. Frame one shows the old version, divider near the right. It sweeps left on a smooth ease with a small overshoot and motion blur, then swings back to the middle on a spring while three cards spring up 12 px, one after another. Still hold at the end. ``` --- ### 25. Ranking Bars – Biểu đồ xếp hạng động **Hiệu ứng:** Các thanh biểu đồ tăng giảm theo thời gian và tự thay đổi vị trí khi một nhóm vượt lên nhóm khác. **Phù hợp:** Thống kê thị phần, báo cáo tăng trưởng, xếp hạng thương hiệu. **Prompt:** ``` Build me a 5-second, 9:16 animated bar chart race (1080x1920, 30 fps) in Remotion on a clean white background that fades to faint cool grey. Title "[MY TITLE]" in bold Inter Tight with a grey subtitle "[MY SUBTITLE]". Six horizontal bars for my categories [MY CATEGORIES] with my numbers for each year [MY YEARLY VALUES]. Make "[MY HERO CATEGORY]" a strong orange-red and the other five calm muted tints. Show a huge light-grey year bottom right whose digits roll up with a small overshoot. Move to the next year every 20 frames: values glide on an eased curve, the numbers count along, and bars swap places on springs with a small overshoot the moment their lengths cross. When the hero reaches first, pop a "1st" chip on it. Finish with a still hold. ``` --- ### 26. Social Post Receipt – Bài đăng mạng xã hội **Hiệu ứng:** Một bài đăng mạng xã hội xuất hiện, số lượt tương tác tăng, các bình luận được xếp chồng và một câu quan trọng được gạch chân. **Phù hợp:** Video bình luận, phân tích thông tin và dẫn chứng nội dung. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a social post used as a receipt in a commentary video. Invent a person, a company and a post that says "[MY QUOTE]". Draw a clean white card on a soft pale grey field, dithered so it never bands: round initials avatar, bold name with a small blue check, grey handle, the post in Inter at a large readable size, a grey timestamp, a hairline, then replies, reposts, likes and views with line icons. Frame one shows the card tilted and slightly oversized, settling on a spring. The counts climb fast and the heart pops red. Two smaller quote posts saying "[MY TWO REPLIES]" rise from below with motion blur and stack, the second pushing the stack up. Then a red marker underlines "[MY KEY LINE]". Red is the only accent. Hold the last second. ``` --- ### 27. Day Counter – Bộ đếm ngày thử thách **Hiệu ứng:** Một bộ đếm ngày lớn thay đổi liên tục, đồng thời các ô trên lịch được đánh dấu hoàn thành. **Phù hợp:** Thử thách 30 ngày, nhật ký học tập, hành trình phát triển cá nhân. **Prompt:** ``` Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a challenge day card. On a white to very light grey background with fine grain, a huge "DAY [30]" in Anton, DAY in red #E5383B and the number in near-black, under a small grey spaced-out caps label "[MY LABEL]". Below it, a white rounded calendar card for [MONTH] (pick a month that really has that many days, like April for 30) with a 7-column grid of [30] rounded squares and each date in the corner. Frame one shows DAY 1 with the first square checked. The number rolls like an odometer: the first few days snap one at a time, a fast vertical blur through the middle, then slow beats into the last three, landing on [30] with a small overshoot. Each square gets a red hand-drawn check, drawn on as a stroke, as its day passes. On landing the card punches slightly and a red circle draws round the last date. Hold still for the last second. ``` --- ### 28. Versus – So sánh hai lựa chọn **Hiệu ứng:** Hai lựa chọn được đặt đối diện, các tiêu chí lần lượt xuất hiện và thanh dữ liệu cho thấy sự khác biệt. **Phù hợp:** So sánh công cụ AI, sản phẩm công nghệ, phần mềm hoặc gói dịch vụ. **Prompt:** ``` Build me a 5-second, 9:16 head-to-head animation (1080x1920, 30 fps) in Remotion, like a sports tale of the tape. [OPTION A] is on the left, [OPTION B] on the right. Four rows: [LABEL, A VALUE, B VALUE, WHO WINS]. Neutral near-black background split by a slanted seam, with faint blue light from the left edge and red-orange glow from the right, kept low, plus fine fixed grain. Blue #3D7BFF left, orange #FF7A30 right. Both names huge in white Anton over a thin colour bar, with a round white VS badge on the seam. Each row: a small grey caps label, values either side of the centre in Barlow Condensed with tabular figures, bars growing outward from the centre, a check chip on the winner. The last row is the payoff: bigger values, a thicker bar, an orange-outlined plate springing in around the whole row. Names slam in, VS pops, rows count up. Hold the last second still. ``` --- *Nguồn tham khảo: Animation styles you can build with Claude — Shaan Johari.* *Góc nhỏ của Hùng — blog.hunghienhoa.com* [Về Blog](https://blog.hunghienhoa.com/)