explaingit

hakimel/css

★ 4,529HTMLAudience · designerComplexity · 1/5LicenseSetup · easy

TLDR

A personal collection of creative CSS and front-end visual experiments by the creator of reveal.js, showcasing advanced web animation techniques through live demos.

Mindmap

mindmap
  root((hakimel css))
    What it does
      CSS experiments
      Live demos
      Visual techniques
    Tech Stack
      CSS
      HTML
    Experiments
      Spiral animations
      Pagination effects
      Flip transitions
    Audience
      Web designers
      Frontend devs
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Browse live demos of creative CSS techniques like animated spirals, pagination effects, and flip card transitions

USE CASE 2

Study the source code of polished front-end experiments to learn advanced CSS animation patterns

Tech stack

CSSHTML

Getting it running

Difficulty · easy Time to first run · 5min

Code is copyrighted and not open-source, for reference and learning only, not for reuse in your own projects.

All rights reserved by the author, you may view the code for learning but cannot redistribute or reuse it in your own projects without permission.

In plain English

This repository is a personal collection of CSS and UI experiments by Hakim El Hattab, a web developer known for creating the popular presentation framework reveal.js. The README is minimal and consists mostly of links to live demos hosted on the author's lab site. The experiments listed include things like a Cloudy Spiral, Flexing Pagination, Device Loop, Checkwave, Monocle List, Flipside, and Progress Nav. Each is a standalone visual or interactive demo showcasing a CSS or front-end technique. The README does not describe what each experiment does beyond its name, nor does it include installation steps or documentation. If you are a web developer or designer curious about creative CSS techniques, the live demo links in the README are the main entry point. The project is copyrighted by the author rather than released under an open-source license.

Copy-paste prompts

Prompt 1
I'm looking at hakimel's CSS experiments repo. Show me how to recreate a CSS-only flip card effect similar to the Flipside demo
Prompt 2
How would I implement a CSS scroll progress navigation indicator inspired by the Progress Nav experiment?
Prompt 3
Give me a CSS animation technique for a wave-style checkbox effect similar to the Checkwave demo
Prompt 4
What CSS properties are typically used to create an animated circular or spiral visual like the Cloudy Spiral experiment?
Open on GitHub → Explain another repo

← hakimel on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.