Playground is an open-source community repo where developers
build small, eye-catching, single-file HTML projects to show off their creativity.
No need for big full-stack apps –
this place is all about clean, creative, impressive frontend shots. ⚡
A shot is:
- a single
.htmlfile - with HTML + CSS + JS all inside that one file
- focused on something visual, interactive or surprising
(buttons, loaders, cards, animations, effects, mini-toys, etc.)
Examples of shot filenames:
magic.htmlmagic-light.htmlneon-button.htmlglass-card.html
- ✅ Vanilla HTML, CSS & JavaScript
- ✅ CDN libraries allowed (for example: fonts, icons, GSAP, etc.)
- ❌ No frameworks (React, Vue, Angular, etc.)
- ❌ No separate
.cssor.jsfiles – everything stays in a single.htmlfile
You can create:
- UI experiments
- micro-interactions
- fancy loaders
- CSS art
- animated cards, buttons, toggles
- tiny visual tools or toys
Basically anything that makes people say:
“Wait… how did you do that? 👀”
-
Each shot must be a single
.htmlfile. -
All HTML, CSS and JS must live inside that file:
- CSS inside a
<style>tag - JS inside a
<script>tag
- CSS inside a
-
Name the file based on your shot / project idea:
magic.htmlmagic-light.htmlcrazy-loader.html
-
You can use CDNs for:
- fonts (Google Fonts, etc.)
- icon libraries
- animation libraries (like GSAP)
but no JS frameworks like React, Vue, etc.
- Fork this repo.
- In the root of the repo, create a new
.htmlfile.
Example:magic.htmlneon-button.htmlglass-card.html
- Put your entire shot inside that one file.
Basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Magic Shot</title>
<style>
/* Write your CSS here */
</style>
</head>
<body>
<!-- Write your HTML here -->
<script>
// Write your JavaScript here
</script>
</body>
</html>