Animaciones e transições

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

Continuar lendo

Últimos posts -->

Você viu esses projetos?

Gymnasia

Gymnasia Gymnasia
Expo
React Native
TypeScript
OpenAI
Anthropic

App de fitness com dois agentes que são executados integralmente no dispositivo, sem backend, de forma que os dados do usuário nunca saem do celular. Um coach conversacional BYOK com tools locais e system prompt remoto com fallback offline, e um estimador de refeições que tira os macronutrientes de uma foto do prato, com leitura de códigos de barras contra o OpenFoodFacts.

Ver projeto

arrow svg

Ver código

arrow svg

LangGraph Deep Researcher

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

Sistema multiagente de pesquisa construído com LangGraph. Um supervisor decompõe sua pergunta em tópicos e lança subagentes de busca em paralelo; cada um comprime seus achados antes de repassá-los a um agente redator que escreve o relatório final em markdown com suas fontes. Streaming ao vivo por WebSockets, modelo configurável por papel e chaves de API próprias que nunca são armazenadas no servidor.

Ver projeto

arrow svg

Ver código

arrow svg

Tau

Tau Tau
Python
LangChain

Sistema multiagente de tutoria para estudantes do ensino médio, com um agente por disciplina e material de curso elaborado e validado por uma equipe de professores. Chegou a ser usado com alunos reais em um colégio privado na Espanha e em uma escola de ensino médio na Colômbia.

Ver projeto

arrow svg
Ver todos os projetos -->
>_ Disponível para projetos

Tem um projeto com IA?

Vamos conversar.

maximofn@gmail.com

Especialista em Machine Learning e Inteligência Artificial. Desenvolvo soluções com IA generativa, agentes inteligentes e modelos personalizados.

Escreva-me LinkedIn

Quer assistir alguma palestra?

Últimas palestras -->

Quer melhorar com essas dicas?

Últimos tips -->

Use isso localmente

Os espaços do Hugging Face nos permitem executar modelos com demos muito simples, mas e se a demo quebrar? Ou se o usuário a deletar? Por isso, criei contêineres docker com alguns espaços interessantes, para poder usá-los localmente, aconteça o que acontecer. Na verdade, se você clicar em qualquer botão de visualização de projeto, ele pode levá-lo a um espaço que não funciona.

Flow edit

Flow edit Flow edit

Edite imagens com este modelo de Flow. Baseado em SD3 ou FLUX, você pode editar qualquer imagem e gerar novas

Ver projeto

arrow svg

Ver código

arrow svg

FLUX.1-RealismLora

FLUX.1-RealismLora FLUX.1-RealismLora
Ver todos os contêineres -->
>_ Disponível para projetos

Tem um projeto com IA?

Vamos conversar.

maximofn@gmail.com

Especialista em Machine Learning e Inteligência Artificial. Desenvolvo soluções com IA generativa, agentes inteligentes e modelos personalizados.

Escreva-me LinkedIn

Você quer treinar seu modelo com esses datasets?

short-jokes-dataset

HuggingFace

Dataset com piadas em inglês

Uso: Fine-tuning de modelos de geração de texto humorístico

231K linhas 2 colunas 45 MB
Ver no HuggingFace →

opus100

HuggingFace

Dataset com traduções de inglês para espanhol

Uso: Treinamento de modelos de tradução inglês-espanhol

1M linhas 2 colunas 210 MB
Ver no HuggingFace →

netflix_titles

HuggingFace

Dataset com filmes e séries da Netflix

Uso: Análise de catálogo Netflix e sistemas de recomendação

8.8K linhas 12 colunas 3.5 MB
Ver no HuggingFace →
Ver mais datasets -->