Animations and transitions

Transitions

Pulser 1

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<div class="pulser1"></div>
 
<style>
    .pulser1 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
    }
    .pulser1:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
</style>

	

	
Copied

Pulser 2

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<div class="pulser2"></div>
 
<style>
    .pulser2 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
        transition: 1s;
    }
    .pulser2:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
</style>

	

	
Copied

Pulser 3

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<div class="pulser3"></div>
 
<style>
    .pulser3 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
    }
    .pulser3:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
    .pulser3 {
        transition: 1s;
    }
    .pulser3 {
        transition-property: background-color, scale;
    }
</style>

	

	
Copied

Animaciones

Small Solar system

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<svg width="220" height="220" viewBox="0 0 220 220">
  <title xml:lang="en">Planets loader</title>
  <circle id="orbit1" cx="50%" cy="50%" r="55px" fill="none" stroke="#f8f3dc" /> 
  <circle id="orbit2" cx="50%" cy="50%" r="75px" fill="none" stroke="#f8f3dc" /> 
  <circle id="orbit3" cx="50%" cy="50%" r="95px" fill="none" stroke="#f8f3dc" /> 
  <circle id="sun" cx="50%" cy="50%" r="28px" fill="#fecb2f" /> 
  <circle id="mars" cx="50%" cy="50%" r="8px" fill="#69b3b2" /> 
  <circle id="mercury" cx="50%" cy="50%" r="8px" fill="#fa3757" /> 
  <circle id="saturn" cx="50%" cy="50%" r="8px" fill="#ffa4a4" /> 
</svg>
 
<style>
    @keyframes rotation {
        from {
                transform: rotate(0deg)
                        translate(var(--translate))
                        rotate(0deg);
            }
            to {
                transform: rotate(360deg)
                        translate(var(--translate)) 
                        rotate(-360deg);
            }
        }
        #mercury {
            --translate: -55px;
            animation: rotation 4s linear infinite;
        }
        #mars {
            --translate: -75px;
            animation: rotation 5s -1s linear infinite;
        }
        #saturn {
            --translate: -95px;
            animation: rotation 8s -3s linear infinite;
        }
</style>

	

	
Copied
Planets loader

Target range inside

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<section class="porto">
    <div class="content-container flex-wrapper">
        <div class="vertical-scroll-container">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto1.svg" alt="sardinas bajo en sodio">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto2.svg" alt="sardinas sin piel">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto3.svg" alt="sardinas en agua">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto4.svg" alt="sardinas al limon">
        </div>
    </div>
</section>
 
<style>
    .porto {
        color: #f5dbc8;
        padding: 32px;
        text-align: center;
    }
    .porto p {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        max-width: 40ch;
    }
    .flex-wrapper {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
    .content-container {
        margin-inline: auto;
        width: 90vw;
    }
    .vertical-scroll-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        /* flex: 1 1 50%; */
        gap: 6rem 0;
        min-width: 400px;
        overflow-y: scroll;
        scrollbar-color: #3848a0 #1b2767;
        scroll-snap-type: y mandatory;  
        padding: 200px 20px;
        height: 100px;
    }
    .vertical-scroll-container img {
        scroll-snap-align: center;
        width: 400px;
        animation: slideInOut;
        animation-timeline: view();
    }
    @keyframes slideInOut {
        from {
            transform: scale(.8) translateY(100px); 
            opacity: 0;
        }
        to { 
            transform: scale(1) translateY(0); 
            opacity: 1;
        }
        0% {
            transform: scale(1) translateY(0); 
            opacity: 1;    
        }
        100% { 
            transform: scale(.8) translateY(-100px); 
            opacity: 0 
        }
    }
    @media screen and (max-width: 40em) {
        .vertical-scroll-container img {
            padding: 0;
            width: 300px;
        }
    }
</style>

	

	
Copied
sardinas bajo en sodio sardinas sin piel sardinas en agua sardinas al limon

Typewriter CSS

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<div class="animation-contanier">
    <div class="wrapper">
        <div class="static-text">for your</div>
        <ul class="dynamic-text">
            <li><span>Slack Channels</span></li>
            <li><span>GitHub Repositories</span></li>
            <li><span>Jira Boards</span></li>
            <li><span>Trello Boards</span></li>
            <li><span>GitLab Repositories</span></li>
            <li><span>Google Drives</span></li>
            <li><span>One Drives</span></li>
            <li><span>Slack Groups </span></li>
            <li><span>Google Events</span></li>
            <li><span>Microsoft Events</span></li>
            <li><span>Keeper Folder</span></li>
        </ul>
    </div>
</div>
 
<style>
    .wrapper {
        display: inline-flex
    }
    .wrapper .static-text {
        font-size: 2.7rem;
        color: #fff;
        font-weight: 400;
    }
    .wrapper .dynamic-text{
        top: -4px;
        margin-left: 15px;
        height: 85px;
        line-height: 1.5;
        position: relative;
        overflow: hidden;
    }
    .dynamic-text li{
        color: yellow;
        background-color: #1e263f;
        list-style: none;
        font-size: 2.7rem;
        font-size: 60px;
        position: relative;
        animation: slide 22s steps(11) infinite;
        top: 0;
    }
    @keyframes slide {
        100% {
            top: -990px;
        }
    }
    .dynamic-text li span{
        position: relative;
    }
    .dynamic-text li span::after{
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        border-left: 2px solid #fff;
        background-color: #1e263f;
        padding: 5px;
        left: 0;
        animation: typing 2s steps(17) infinite;
    }
    @keyframes typing {
        60%, 100% {
            left: 100%;
            margin: 0 -40px 0 40px;
        }
    }
</style>

	

	
Copied
for your
  • Slack Channels
  • GitHub Repositories
  • Jira Boards
  • Trello Boards
  • GitLab Repositories
  • Google Drives
  • One Drives
  • Slack Groups
  • Google Events
  • Microsoft Events
  • Keeper Folder

Rotate Down Right

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<div class="animated rotateInDownRight">Example</div>
 
<style>
    @keyframes rotateInDownRight {
        from {
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
            opacity: 0;
        }
        to {
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation: rotateInDownRight 1s linear infinite;
    }
</style>

	

	
Copied
Example

Continue reading

Last posts -->

Have you seen these projects?

Gymnasia

Gymnasia Gymnasia
Expo
React Native
TypeScript
OpenAI
Anthropic

Fitness app with two agents that run entirely on the device, with no backend, so the user's data never leaves the phone. A BYOK conversational coach with local tools and a remote system prompt with offline fallback, plus a food estimator that pulls macronutrients out of a photo of the plate, with barcode scanning against OpenFoodFacts.

View project

arrow svg

View code

arrow svg

LangGraph Deep Researcher

LangGraph Deep Researcher LangGraph Deep Researcher
Python
LangGraph
FastAPI
React
TypeScript
Docker

Multi-agent research system built with LangGraph. A supervisor breaks your question down into topics and launches search sub-agents in parallel; each one compresses its findings before handing them to a writer agent that produces the final sourced markdown report. Live streaming over WebSockets, a configurable model per role and bring-your-own API keys that are never persisted server-side.

View project

arrow svg

View code

arrow svg

Tau

Tau Tau
Python
LangChain

Multi-agent tutoring system for secondary school students, with one agent per subject and course material written and validated by a team of teachers. It was used with real students at a private school in Spain and at a secondary school in Colombia.

View project

arrow svg
View all projects -->
>_ Available for projects

Do you have an AI project?

Let's talk.

maximofn@gmail.com

Machine Learning and AI specialist. I develop solutions with generative AI, intelligent agents and custom models.

Write me LinkedIn

Do you want to watch any talk?

Last talks -->

Do you want to improve with these tips?

Last tips -->

Use this locally

Hugging Face spaces allow us to run models with very simple demos, but what if the demo breaks? Or if the user deletes it? That's why I've created docker containers with some interesting spaces, to be able to use them locally, whatever happens. In fact, if you click on any project view button, it may take you to a space that doesn't work.

Flow edit

Flow edit Flow edit

FLUX.1-RealismLora

FLUX.1-RealismLora FLUX.1-RealismLora
View all containers -->
>_ Available for projects

Do you have an AI project?

Let's talk.

maximofn@gmail.com

Machine Learning and AI specialist. I develop solutions with generative AI, intelligent agents and custom models.

Write me LinkedIn

Do you want to train your model with these datasets?

short-jokes-dataset

HuggingFace

Dataset with jokes in English

Use: Fine-tuning text generation models for humor

231K rows 2 columns 45 MB
View on HuggingFace →

opus100

HuggingFace

Dataset with translations from English to Spanish

Use: Training English-Spanish translation models

1M rows 2 columns 210 MB
View on HuggingFace →

netflix_titles

HuggingFace

Dataset with Netflix movies and series

Use: Netflix catalog analysis and recommendation systems

8.8K rows 12 columns 3.5 MB
View on HuggingFace →
View more datasets -->