OBS Customizable animations from a browser source (!!! jedźiemy !!!).
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.
Last active
October 9, 2025 11:58
-
-
Save atomjoy/36342bd79e9d77bcfb99002d3808bb9f to your computer and use it in GitHub Desktop.
OBS Customizable html animations from a browser source.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment