Create the “raining P10” animation with the browser file below, record a short loop, and export the recording as a GIF in Clipchamp.
1. Create the animation
- Open Notepad.
- Paste this code.
- Save it as
p10-rain.html, selecting All files as the file type. - Double-click the file to open it in a browser.
- Press F11 for full-screen display.
<!doctype html>
<html><body><canvas id="c"></canvas><script>
const c=document.querySelector("canvas"),x=c.getContext("2d");
let drops=[];
function size(){c.width=innerWidth;c.height=innerHeight}
function add(){drops.push({x:Math.random()*c.width,y:-40,
speed:2+Math.random()*5,size:20+Math.random()*35})}
function draw(){
x.fillStyle="#050510";x.fillRect(0,0,c.width,c.height);
x.fillStyle="#42d9ff";x.textAlign="center";x.shadowBlur=12;
x.shadowColor="#42d9ff";
drops.forEach(d=>{x.font=`bold ${d.size}px Arial`;
x.fillText("P10",d.x,d.y);d.y+=d.speed});
drops=drops.filter(d=>d.y<c.height+60);
if(Math.random()<.18)add();
requestAnimationFrame(draw);
}
onresize=size;size();setInterval(add,90);draw();
</script></body></html>
To customize it:
- Replace
#050510with another background color. - Replace both instances of
#42d9ffto change the text and glow. - Increase
.18or reduce90for heavier rain. - Replace
"P10"if different wording is required.
2. Record a short loop
If using Clipchamp with a work or school account:
- Open Clipchamp and select Create new → Screen recording.
- Select the browser window containing the animation.
- Record between 5 and 15 seconds.
- Stop recording, trim the beginning and end, and add the clip to the project.
Microsoft documents screen recording—including selecting a browser tab, window, or entire screen—for the Microsoft 365 work or school version of Clipchamp.^1^
For a personal account, record the browser window with an available screen recorder, save the recording, and import it into Clipchamp. Clipchamp supports importing video, images, and audio; the Windows app is available on Windows 10 and Windows 11.^2^
3. Export it as a GIF
- Keep the final timeline at 15 seconds or less.
- Select Export in the upper-right corner.
- Choose GIF.
- Wait for processing to finish.
GIF export is available for projects no longer than 15 seconds. In personal Clipchamp, the result normally downloads to the Downloads folder. If the project uses premium assets, remove them or switch to a plan that includes them before exporting.^3^
Clipchamp’s documented text tools can add and format text, but the available documentation does not establish an arbitrary top-to-bottom motion path for text objects. The browser animation therefore creates the falling motion, while Clipchamp records, trims, and converts it to GIF.^4^
References