Loading
Motion & Animation System
The brand in
motion.
Every animation in the Ambrosio Health system has a purpose. Motion communicates vitality, scientific precision and organic energy.
VITALITY·LONGEVIDADE·PERFORMANCE·BIOENGENHARIA·PROTOCOLOS·REGENERAÇÃO·VITALIDADE HUMANA·CIÊNCIA DO MOVIMENTO·
VITALITY·LONGEVIDADE·PERFORMANCE·BIOENGENHARIA·PROTOCOLOS·REGENERAÇÃO·VITALIDADE HUMANA·CIÊNCIA DO MOVIMENTO·
Motion System
4 Motion Principles
Every animation in the Ambrosio Health system has a purpose. Motion communicates vitality, scientific precision and organic energy.
Principle 01
Organic
Animations that imitate organic physics — no rigid or mechanical movements. Every curve reflects the biological nature of the brand.
Principle 02
Purposeful
Every animation has a function. We never use motion for decoration — only when it adds meaning, hierarchy or context.
Principle 03
Scientific
Precise, controlled, calibrated. The easing curves and durations were chosen based on perception studies and visual comfort.
Principle 04
Elegant
Subtle, never exaggerated. Motion that is noticed when absent, not when present. Discretion is the mark of sophistication.
Easing Curves
As quatro curvas oficiais da marca. Passe o mouse sobre cada card para ver a animação ao vivo.
Brand Smooth
Brand Smooth
cubic-bezier(0.4, 0, 0.2, 1)
350ms · Material standard easing
Transições gerais de UI. Troca de estados, modals, toasts, mudanças de cor.
hover for demo →
Brand Spring
Brand Spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
400ms · Slight overshoot
Hover states, botões, entradas de elementos interativos. Transmite vida e responsividade.
hover for demo →
Brand Decel
Brand Decel
cubic-bezier(0, 0, 0.2, 1)
550ms · Ease out
Elementos entrando na viewport (scroll reveals, page transitions). Deceleração natural ao parar.
hover for demo →
Brand Accel
Brand Accel
cubic-bezier(0.4, 0, 1, 1)
200ms · Ease in
Elementos saindo da tela. Rápido e direto — o usuário não precisa esperar a saída.
hover for demo →
Duration Scale
TokenDuraçãoUso
instant100msFeedback imediato — tooltip, press state
fast200msMicro-interações, saídas de elementos
normal350msTransições de UI, troca de estados
slow550msEntradas de elementos, scroll reveals
dramatic800msHero sections, reveals de página, onboarding
Micro-interactions
Small animations that communicate state, feedback and brand personality at every interaction point.
Button Hover
Scale(1.05) + translateY(-2px) + shadow laranja. Brand Spring 400ms.
Link Underline
Underline cresce da esquerda para a direita via scaleX(0→1). Brand Smooth 350ms.
◈
Protocolo Vital
Card Lift
translateY(-6px) + shadow profundo + borda laranja. Brand Spring 400ms.
Pulse Ring
Dois anéis concêntricos expandindo com fade. Transmite vitalidade e presença ativa.
Loading Shimmer
Skeleton loader com gradiente laranja-dourado deslizando. Substitui spinners genéricos.
hover para preview
Vitalidade Humana
Fade In Up
Opacity(0→1) + translateY(28px→0). Padrão de entrada para conteúdos revelados. Brand Decel 550ms.
Cinética da Marca
Brand in Motion
A marca Ambrosio Health carrega cinética em seu DNA — o símbolo, derivado de estruturas moleculares em expansão, nunca está estático. Em movimento, comunica evolução perpétua e vigor científico.
ENGINEERING HUMAN VITALITY·BIOENGENHARIA·LONGEVIDADE·PERFORMANCE·AMBROSIO HEALTH·PROTOCOLOS CIENTÍFICOS·
ENGINEERING HUMAN VITALITY·BIOENGENHARIA·LONGEVIDADE·PERFORMANCE·AMBROSIO HEALTH·PROTOCOLOS CIENTÍFICOS·
VITALIDADE·REGENERAÇÃO CELULAR·CIÊNCIA·LONGEVITY PROTOCOLS·BIOHACKING·HUMAN ENGINEERING·
VITALIDADE·REGENERAÇÃO CELULAR·CIÊNCIA·LONGEVITY PROTOCOLS·BIOHACKING·HUMAN ENGINEERING·
O símbolo orbita em rotação contínua de 30s — velocidade subliminar, perceptível apenas à periferia da visão. Em interfaces, o símbolo nunca para. Em impressos, captura-se em posições de expansão máxima.
Scroll & Viewport
Scroll Reveals
Quatro padrões de reveal ao entrar na viewport. Hover para pré-visualizar. Na implementação real, o IntersectionObserver ativa as animações conforme o scroll.
hover para preview
Fade Up
Fade Up
Padrão — Use em 90% dos elementos
Brand Decel · 550ms · delay escalonado +100ms por item
@keyframes fade-in-up {
0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0); }
}
/* JS: adiciona classe .in ao elemento */
.in { animation: fade-in-up 550ms cubic-bezier(0,0,.2,1) both; }
0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0); }
}
/* JS: adiciona classe .in ao elemento */
.in { animation: fade-in-up 550ms cubic-bezier(0,0,.2,1) both; }
hover para preview
Fade In
Fade In
Para imagens e fundos
ease · 550ms · sem transformação
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Ideal para overlays e imagens */
.in { animation: fade-in 550ms ease both; }
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Ideal para overlays e imagens */
.in { animation: fade-in 550ms ease both; }
hover para preview
Scale Up
Scale Up
Cards, logos, CTAs destacados
Brand Spring · 550ms · scale .88 → 1
@keyframes scale-up {
0% { opacity: 0; transform: scale(.88); }
100% { opacity: 1; transform: scale(1); }
}
/* Overshoot sutil do spring */
.in { animation: scale-up 550ms cubic-bezier(.175,.885,.32,1.275) both; }
0% { opacity: 0; transform: scale(.88); }
100% { opacity: 1; transform: scale(1); }
}
/* Overshoot sutil do spring */
.in { animation: scale-up 550ms cubic-bezier(.175,.885,.32,1.275) both; }
hover para preview
Slide Right
Listas, timelines, steps horizontais
Brand Decel · 550ms · translateX(-32px → 0)
@keyframes slide-right {
0% { opacity: 0; transform: translateX(-32px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Para listas e steps sequenciais */
.in { animation: slide-right 550ms cubic-bezier(0,0,.2,1) both; }
0% { opacity: 0; transform: translateX(-32px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Para listas e steps sequenciais */
.in { animation: slide-right 550ms cubic-bezier(0,0,.2,1) both; }
Implementação em React (Framer Motion)
// Usando Framer Motion para os reveals
import { motion } from 'framer-motion';
// Fade In Up Componente
<motion.div
initial={{ opacity: 0, y: 28 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-32px" }}
transition={{ duration: 0.55, ease: [0, 0, 0.2, 1] }}
>
Conteúdo
</motion.div>
import { motion } from 'framer-motion';
// Fade In Up Componente
<motion.div
initial={{ opacity: 0, y: 28 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-32px" }}
transition={{ duration: 0.55, ease: [0, 0, 0.2, 1] }}
>
Conteúdo
</motion.div>