Skip to content

Instantly share code, notes, and snippets.

@atomjoy

atomjoy/OBS-Browser-Custom-Animations.md

Last active October 9, 2025 11:58
Show Gist options
  • Save atomjoy/36342bd79e9d77bcfb99002d3808bb9f to your computer and use it in GitHub Desktop.
Save atomjoy/36342bd79e9d77bcfb99002d3808bb9f to your computer and use it in GitHub Desktop.
Download ZIP
OBS Customizable html animations from a browser source.
Raw
obs-animate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>!!! JEDŹIEMY!!! | OBS Custom Html Animations | Powerd by Atomjoy</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Honk&family=Rubik+Iso&display=swap" rel="stylesheet">
<style>
:root {
--atomjoy-emoji: '😍';
--atomjoy-color1: #baeb34;
--atomjoy-color2: #ff5f1f;
/* Dont remove */
--atomjoy-speed: 10s;
--atomjoy-emoji-speed: 2.5s;
--atomjoy-width-minus: -500px;
--atomjoy-width-plus: 500px;
}
body {
background: black;
/* black required */
margin: 0px;
padding: 0px;
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
overflow: hidden;
}
.wow {
width: auto;
height: auto;
display: inline;
position: absolute;
bottom: 50px;
/* top: 10px; */
/* right: 10px; */
/* font-family: "Honk", system-ui; */
/* font-family: "Rubik Iso", system-ui; */
font-family: "Audiowide", sans-serif;
padding: 10px 20px;
margin-left: var(--atomjoy-width-minus);
font-size: 40px;
font-weight: 900;
background: #fff;
white-space: nowrap;
border-radius: 20px;
border: 5px solid #fff;
animation: toRight var(--atomjoy-speed) infinite linear;
}
.wow::after {
content: var(--atomjoy-emoji);
display: inline;
position: absolute;
right: -80px;
top: -10px;
padding: 10px;
border-radius: 20px;
background: var(--atomjoy-color1);
border: 5px solid #fff;
animation: rotate var(--atomjoy-emoji-speed) infinite linear;
}
.wow::before {
content: var(--atomjoy-emoji);
display: inline;
position: absolute;
left: -80px;
top: -10px;
padding: 10px;
border-radius: 20px;
background: var(--atomjoy-color1);
border: 5px solid #fff;
animation: rotate var(--atomjoy-emoji-speed) infinite linear;
}
@keyframes toRight {
0% {
background-color: var(--atomjoy-color2);
margin-left: var(--atomjoy-width-minus);
/* transform: rotate(0deg); */
}
50% {
background-color: var(--atomjoy-color1);
}
100% {
background-color: var(--atomjoy-color2);
margin-left: 100%;
/* transform: rotate(360deg); */
}
}
@keyframes toLeft {
0% {
background-color: var(--atomjoy-color2);
margin-left: calc(100% + var(--atomjoy-width-plus));
}
50% {
background-color: var(--atomjoy-color1);
}
100% {
background-color: var(--atomjoy-color2);
margin-left: var(--atomjoy-width-minus);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
background-color: var(--atomjoy-color1);
}
50% {
transform: rotate(360deg) scale(1.3);
background-color: var(--atomjoy-color2);
}
100% {
transform: rotate(720deg) scale(1);
background-color: var(--atomjoy-color1);
}
}
</style>
</head>
<body>
<div class="wow">
!!! JEDŹIEMY !!!
</div>
</body>
</html>
Raw
OBS-Browser-Custom-Animations.md

OBS Browser Custom Html Animations

OBS Customizable animations from a browser source (!!! jedźiemy !!!).

How to use

Download to pulpit, unzip file, run html file with 2 clicks then copy url from browser to OBS Browser source and set resolution to 1920x 1080px.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment