cerebro-vip INEMA.CLUB
início › INEMA.VIBE

Tópico de design system do INEMA.CLUB focado em presets…

INEMA.VIBE · 2026-01-20 · ~14 min · ver no Telegram ↗

INEMA

classcentral.com ↗ "Revolutionizing Web Animation: Best Ways to Learn GSAP in 2026"

Aqui estão os melhores sites, repositórios e recursos para aprender e aplicar movimentos (animations) em sites, desde fundamentos com CSS até bibliotecas avançadas como GSAP e Framer Motion — com descrições do que cada um oferece 👇

🌐 1. FreeFrontend — exemplos práticos de animações CSS e JS⌗

🔹 54 CSS Scroll Effects — FreeFrontend Uma coleção de efeitos de scroll com código e demos (masks, 3D, sticky, reveal, parallax). (FreeFrontend) 👉 Excelente para ver exemplos que funcionam sem frameworks ou como inspiração visual.

🔹 249 GSAP.js Examples — FreeFrontend Banco com quase 250 exemplos de animações usando GSAP (timelines, stagger, scroll effects). (FreeFrontend) 👉 Ideal se você quiser aprender animações complexas com código pronto.

📚 2. Documentação oficial e guias⌗

🧠 CSS nativo (sem libs)⌗

✨ CSS Scroll-driven Animations — MDN Web Docs Guia oficial para animações baseadas em scroll com CSS puro. (MDN Web Docs) 👉 Ótimo para aprender o que dá para fazer sem JS ou libs externas.

📜 CSS animation on scroll (GeeksforGeeks) Tutorial passo a passo com exemplos simples para animar durante o scroll. (GeeksforGeeks) 👉 Bom para começar se você já sabe HTML/CSS.

💡 3. Bibliotecas e ferramentas profissionais⌗

🟢 GSAP (GreenSock Animation Platform)⌗

🌐 GSAP Docs & Getting Started Guia oficial para começar a animar com GSAP, uma das bibliotecas mais utilizadas em produção. (GSAP) 👉 Perfeito para animações complexas, sequências e scroll interactions.

📍 Exemplos e cursos (como GreenSock101 e vídeos do YouTube) também estão disponíveis com demonstrações de uso em projetos reais. ([Class Central][6])

🔷 Framer Motion⌗

  • 📌 Biblioteca de animação para React moderna (foco em componentes e gestos). (Motion)
  • 👉 Excelente para interfaces interativas em SPA/React, com fácil integração e controles de estado.

🛠️ 4. Outras ferramentas úteis⌗

🎨 Lottie Animation⌗

Recurso para animações vetoriais leves (JSON) que podem rodar em webpages ou apps. (FreeCodeCamp) 👉 Ideal para ícones animados, microinteractions e elementos emocionais.

📦 5. Repositórios e exemplos práticos⌗

🔹 GitHub — Web Animation Demos (GSAP, Anime.js, Framer Motion) Exemplos para clonar, estudar e adaptar. (GitHub) 👉 Útil para ver o código funcionando em projetos reais.

📌 Como começar em etapas⌗

Iniciante (sem JS)

  1. Aprenda CSS animations (@keyframes, transition, scroll-driven) → MDN Web Docs e ForFrontend exemplos. (MDN Web Docs)

Intermediário 2. Combine CSS com JavaScript para scroll animations → Tutoriais Tuts+ e GeeksforGeeks. (Web Design Envato Tuts+)

Avançado 3. Aprenda GSAP para sequências e controle fino → GSAP official docs + FreeFrontend examples. (GSAP)

React 4. Use Framer Motion em interfaces interativas → Docs oficiais + exemplos. (Motion)

📌 Conclusão⌗

Se seu objetivo é aplicar movimentos em sites profissionais, comece por:

  • ✔️ CSS scroll animations para efeitos leves e performáticos
  • ✔️ GSAP para controle absoluto e interações complexas
  • ✔️ Framer Motion se estiver usando React
  • ✔️ Lottie para ícones animados e microinteractions

Quer que eu monte uma lista de cursos e vídeos específicos para cada tecnologia (GSAP, CSS, Framer)?

[6]:

💰 NOVOS PRESETS DE VENDAS — INEMA.CLUB⌗

Estes presets não são educacionais. Eles existem para converter.

🔥 PRESET 6 — Sales Focused (Forte)⌗

Objetivo⌗

Converter sem parecer agressivo. Ideal para:

  • Landing pages principais
  • Vendas de cursos
  • Convites pagos
  • Early adopters

🧠 Estado cognitivo ativado⌗

“Isso é claro, faz sentido e vale a pena.”

🎨 Visual⌗

  • Dark base mantido
  • Acentos fortes em 1 cor dominante (azul elétrico ou violeta)
  • Headline com alto contraste
  • CTAs sempre visíveis (sticky ou repetidos)

🎥 Motion (bem definido)⌗

Entrada

  • Slide + fade curto (0.3–0.4s)
  • TranslateY menor (4–6px)
  • Stagger rápido

Scroll

  • Scroll-driven leve
  • Seções empurram a próxima (sensação de progresso)

Background

  • Quase estático
  • Nada que distraia do CTA

Interação

  • Hover:

  • Scale 1.03

  • Glow leve

  • Click:

  • Compress (0.96)

  • Release rápido

📌 Ritmo⌗

  • Rápido
  • Pouco espaço morto
  • Leitura escaneável

📢 CTA⌗

  • Direto, mas educado Ex: “Start Now” “Join INEMA.CLUB”

🔥 Intensidade⌗

Alta, mas controlada.

🚨 PRESET 7 — Sales Aggressive⌗

Objetivo⌗

Converter agora. Ideal para:

  • Lançamentos
  • Últimas vagas
  • Ofertas com tempo
  • Campanhas de tráfego pago

🧠 Estado cognitivo ativado⌗

“Preciso decidir agora.”

🎨 Visual⌗

  • Contraste máximo
  • Duas cores dominantes (ex: preto + vermelho / laranja)
  • CTAs grandes, repetidos
  • Elementos piscam atenção (com moderação)

🎥 Motion (agressivo de verdade)⌗

Entrada

  • Scale + snap-in
  • Duração curta (0.2–0.3s)
  • Zero delay

Scroll

  • Scroll trava seções
  • Snap scrolling
  • Elementos “ativam” agressivamente

Background

  • Pulsos leves
  • Luz radial no CTA
  • Gradiente dinâmico curto

Interação

  • Hover:

  • Scale 1.05

  • Glow forte

  • Click:

  • Compress profundo

  • Bounce curto

📌 Ritmo⌗

  • Muito rápido
  • Pouca leitura
  • Muito direcionamento visual

📢 CTA⌗

  • Imperativo Ex: “Enroll Now” “Secure Your Spot” “Join Today”

🔥 Intensidade⌗

Muito alta (uso pontual).

🧠 COMPARAÇÃO RÁPIDA⌗

Preset Tipo Emoção Uso ideal
Sales Focused Forte Confiança Conversão principal
Sales Aggressive Muito forte Urgência Lançamento / escassez

FRASE IMPORTANTE (guarde isso)⌗

Venda não é estética. É manipulação consciente de ritmo, contraste e atenção.

-

RESPOSTA CURTA (objetiva)⌗

👉 Se a landing page do INEMA.CLUB for de conversão, ela NÃO pode usar o mesmo comportamento visual da versão educacional.

Ela precisa mudar o modo cognitivo do usuário:

  • de aprendizado → para decisão
  • de exploração → para ação

Isso é design de conversão, não estética bonita.

O ERRO MAIS COMUM⌗

Muita gente acha que:

“é só colocar um botão de CTA”

❌ Errado.

Se o ritmo, motion e hierarquia continuam educacionais, o cérebro do usuário não entra em modo de decisão.

O QUE PRECISA MUDAR (na prática)⌗

Abaixo está uma comparação direta entre:

  • INEMA.CLUB Educacional
  • INEMA.CLUB Conversão

COMO FICARIA UMA LANDING DE CONVERSÃO DO INEMA⌗

Estrutura ideal⌗

HERO (oferta clara) BENEFÍCIOS (rápidos) PROVA (números, depoimentos) O QUE VOCÊ VAI APRENDER CTA FORTE FOOTER MINIMAL

EXEMPLO DE HERO (conversão)⌗

Headline:

Learn how to work with AI — and turn knowledge into action.

Subheadline:

A practical framework to communicate with machines, automate ideas, and understand people.

CTA: 👉 Start now 👉 Join INEMA.CLUB

FRASE MAIS IMPORTANTE (guarde isso)⌗

Educação prepara. Conversão empurra.

Ambas são válidas, mas não podem usar o mesmo comportamento visual.

CONCLUSÃO DIRETA⌗

Sim, se o objetivo for conversão, o INEMA.CLUB:

  • Deve mudar ritmo
  • Deve aumentar contraste
  • Deve reduzir texto
  • Deve usar motion direcional
  • Deve repetir CTA

👉 O conteúdo pode ser o mesmo. 👉 A experiência não pode.

🎨 COMPARAÇÃO VISUAL — ANDYNOCODE vs INEMA.CLUB⌗

Dimensão Visual ANDYNOCODE (Original) INEMA.CLUB (Atual) O que muda na prática
Objetivo visual Performance, marketing, conversão Educação, transformação, movimento O site deixa de “vender” e passa a ensinar e guiar
Primeira impressão Impacto comercial imediato Confiança + acolhimento intelectual Menos agressivo, mais convidativo
Paleta base Dark + azul metálico Dark + azul/violeta educacional Tons mais humanos e cognitivos
Uso de cor Acentos raros, técnicos Acentos narrativos e didáticos Cor passa a explicar, não só destacar
Contraste Alto, orientado a CTA Médio-alto, orientado à leitura Menos fadiga visual
Tipografia Muito grande, agressiva Grande, clara, pedagógica Menos “marketing shout”, mais clareza
Ritmo visual Rápido, direto Ritmo variável, respirado Espaços para reflexão
Glassmorphism Forte, “tech premium” Suave, “camada de conhecimento” Menos espetáculo, mais função
Motion geral Controlado, funcional Fluido, narrativo Motion passa a guiar aprendizado
Scroll behavior Linear Narrativo / progressivo Scroll vira parte da experiência
Background Abstrato tech, neutro Abstrato educacional, vivo Fundo “respira” mais
Microinterações Técnicas (hover clean) Humanizadas (feedback suave) Interface parece mais viva
CTAs Fortes, frequentes Convidativos, espaçados Menos pressão, mais adesão
Sensação final Produto premium Ecossistema educacional De site para ambiente

🧠 LEITURA RÁPIDA (diferença-chave)⌗

  • ANDYNOCODE → “Confie em nós, converta agora.”

  • INEMA.CLUB → “Aprenda, entenda, transforme-se.”

📌 FRASE DE POSICIONAMENTO VISUAL⌗

ANDYNOCODE é performance orientada a conversão. INEMA.CLUB é clareza orientada à transformação.

Pense assim: cada coluna altera o “estado do sistema”.

🧠 O QUE REALMENTE ACONTECE EM CADA DIMENSÃO⌗

1️⃣ PRESET — troca de estado global⌗

O que acontece de verdade⌗

  • Um estado global é ativado (preset = 'youth', por exemplo)
  • Tokens visuais e de motion são trocados
  • Nenhum conteúdo muda, só o comportamento do sistema

O usuário percebe⌗

“O site continua o mesmo, mas parece outro.”

2️⃣ PERSONALIDADE — reprogramação emocional⌗

O que acontece⌗

  • O sistema redefine:

  • Velocidade média das animações

  • Quantidade de estímulo visual
  • Peso dos elementos

Exemplo real⌗

  • Personalidade calma:

  • Tudo entra devagar

  • Nada “chama atenção”

  • Personalidade ativa:

  • Elementos competem levemente pelo olhar

O usuário percebe⌗

“Esse site é tranquilo” ou “Esse site é energético”

3️⃣ CORES — ativação sensorial⌗

O que acontece⌗

  • Tokens de cor mudam:

  • Accent

  • Highlight
  • Focus
  • O contraste ativo muda

Exemplo real⌗

  • Calm:

  • Cor só reforça hierarquia

  • Energy:

  • Cor guia o olhar ativamente

O usuário percebe⌗

“Sei onde olhar sem pensar”

4️⃣ ENTRADA (ENTRANCE) — primeiro impacto cognitivo⌗

O que acontece⌗

  • Cada elemento recebe:

  • Tipo de animação

  • Duração
  • Delay
  • A IA / engine decide como o olho percorre a tela

Exemplo real⌗

  • Fade lento:

  • O cérebro relaxa

  • Slide rápido:

  • O cérebro entra em modo ação

O usuário percebe⌗

“Isso é calmo” ou “Isso é rápido e direto”

5️⃣ SCROLL — controle de narrativa⌗

O que acontece⌗

  • Scroll vira:

  • Apenas transporte (calmo)

  • Ou um gatilho de eventos

Exemplo real⌗

  • Scroll neutro:

  • Leitura contínua

  • Scroll-driven:

  • Seções “respondem” ao avanço

O usuário percebe⌗

“Estou lendo” ou “Estou avançando”

6️⃣ BACKGROUND MOTION — sensação de vida⌗

O que acontece⌗

  • Camadas de fundo:

  • Se movem

  • Pulsa
  • Reagem ao scroll

Exemplo real⌗

  • Fundo estático:

  • Interface sólida

  • Fundo vivo:

  • Interface “respira”

O usuário percebe⌗

“Isso parece vivo” ou “Isso parece estático”

7️⃣ INTERAÇÃO (HOVER / CLICK) — confirmação de controle⌗

O que acontece⌗

  • Cada ação gera:

  • Feedback visual

  • Feedback físico (scale, compress)
  • O sistema confirma: “eu ouvi você”

Exemplo real⌗

  • Sem feedback:

  • Insegurança

  • Feedback rico:

  • Confiança

O usuário percebe⌗

“Isso responde bem”

8️⃣ INTENSIDADE — carga cognitiva total⌗

O que acontece⌗

  • O sistema regula:

  • Quantos estímulos simultâneos existem

  • Quanto tempo o usuário precisa processar

Exemplo real⌗

  • Intensidade baixa:

  • Ideal para estudo

  • Intensidade alta:

  • Ideal para impacto

O usuário percebe⌗

“Consigo ficar aqui” ou “Isso me empolga”

🧠 COMO TUDO SE COMBINA (o ponto-chave)⌗

Nenhuma coluna age sozinha.

Quando você muda intensidade, o sistema automaticamente:

  • Ajusta duração
  • Ajusta delays
  • Ajusta quantidade de motion
  • Ajusta contraste

👉 É um sistema de compensação, não de soma.

FRASE MAIS IMPORTANTE⌗

Você não está mudando animações. Você está mudando o comportamento cognitivo da interface.

🧠 Como usar essa tabela⌗

  • Linha = experiência
  • Coluna = decisão de design

  • Você escolhe um preset e sabe exatamente:

  • Como entra

  • Como se move
  • Como reage
  • Quão intenso é

📌 Leitura rápida (atalhos)⌗

  • Quer luxo silencioso → Premium Calm
  • Quer energia jovem → Youth Energy
  • Quer ação e execução → Momentum
  • Quer aprendizado profundo → Flow Learning
  • Quer impacto e visão → Future Impact
  • Quer empatia e conexão → Human Pulse

Abaixo vou deixar explícita a diferença de animação, de forma visualizável, comparável e acionável. Pense nisso como níveis de intensidade e tipos de movimento, não só “mais ou menos animação”.

🎥 MATRIZ DE MOTION — DIFERENÇAS REAIS ENTRE PRESETS⌗

Vou usar 4 dimensões de animação, porque é assim que designers e devs realmente diferenciam motion:

  1. Entrada (Entrance)
  2. Scroll (Scroll-driven)
  3. Loop / Background
  4. Interação (Hover / Feedback)

🟢 PRESET 0 — Premium Calm (Atual)⌗

Entrada

  • Fade + translateY (8–12px)
  • Duração: 0.6–0.8s
  • Delay mínimo

Scroll

  • Quase inexistente
  • Apenas lazy appearance

Loop / Background

  • Muito sutil (quase imperceptível)
  • Ex: leve noise ou gradiente estático

Interação

  • Hover simples
  • Opacity / color change

👉 Motion quase invisível → luxo silencioso

🎨 PRESET 1 — Youth Energy⌗

Entrada

  • Scale + fade (0.95 → 1)
  • TranslateY mais curto (4–6px)
  • Duração: 0.4–0.5s
  • Stagger visível entre elementos

Scroll

  • Scroll reveal mais frequente
  • Pequenos overshoots (ease-out-back)

Loop / Background

  • Gradientes animados
  • Blobs ou waves lentos (loop infinito)

Interação

  • Hover com:

  • Glow

  • Micro scale (1.02)
  • Cor animada

👉 Site “respira” o tempo todo

⚡ PRESET 2 — Momentum⌗

Entrada

  • Entrada lateral (X axis)
  • Stagger agressivo
  • Duração curta (0.3–0.4s)

Scroll

  • Scroll-driven forte:

  • Progresso

  • Barras
  • Seções que “empurram” a próxima

Loop / Background

  • Quase nenhum (foco em ação)

Interação

  • Click feedback:

  • Compress (scale 0.97)

  • Bounce curto ao soltar

👉 Sensação de avanço constante

🌊 PRESET 3 — Flow Learning⌗

Entrada

  • Morph + fade
  • Elementos entram conectados
  • Duração longa (0.8–1s)

Scroll

  • Parallax real:

  • Background move diferente do texto

  • Layers com velocidades diferentes

Loop / Background

  • Fluxos contínuos
  • Linhas, partículas ou ribbons lentos

Interação

  • Hover quase inexistente
  • Foco em leitura fluida

👉 Scroll vira narrativa

🚀 PRESET 4 — Future Impact⌗

Entrada

  • Hard cuts + reveal masks
  • Clip-path animations
  • Duração média (0.5–0.6s)

Scroll

  • Trigger forte:

  • Seções “ativam”

  • Mudanças de estado

Loop / Background

  • Partículas ativas
  • Grids 3D
  • Luz pulsante

Interação

  • Hover dramático:

  • Glow forte

  • Distortion leve

👉 Motion como espetáculo

❤️ PRESET 5 — Human Pulse⌗

Entrada

  • Fade + scale orgânico
  • Timing irregular (mais humano)

Scroll

  • Scroll suave
  • Pouca interrupção

Loop / Background

  • Movimento orgânico lento
  • Nada geométrico

Interação

  • Hover emocional:

  • Cor quente

  • Micro movimento lateral

👉 Motion transmite empatia

🧠 RESUMO VISUAL (bem direto)⌗

Preset Intensidade Tipo de Motion
Premium Calm 🔹 Muito baixa Invisível
Youth Energy 🔸 Média Viva
Momentum 🔶 Alta Direcional
Flow Learning 🔹🔸 Média Contínua
Future Impact 🔥 Muito alta Dramática
Human Pulse 🔸 Média Orgânica

FRASE FINAL (importante)⌗

Agora sim: cada preset tem um comportamento de animação claramente diferente, não só um “clima”.

Abaixo estão 5 novos presets, cada um com personalidade clara, quando usar e o que muda.

🧩 BASELINE (referência)⌗

Preset 0 — Premium Calm (Atual)⌗

Personalidade: Elegante · Educacional · Confiante · Atemporal

Características:

  • Dark base
  • Glassmorphism sutil
  • Motion suave e lento
  • Ritmo espaçado
  • Poucas cores, muito contraste

👉 Este é o padrão institucional.

🔥 NOVOS PRESETS⌗

🎨 PRESET 1 — Youth Energy⌗

Personalidade: Jovem · Curioso · Vivo · Inspirador

O que muda:

  • Gradientes vivos (azul, roxo, ciano)
  • Motion contínuo no background
  • Ícones animados em loop lento
  • Headlines com gradiente animado
  • Ritmo visual mais rápido

Usar quando: Comunidade, onboarding, conteúdo introdutório.

⚡ PRESET 2 — Momentum⌗

Personalidade: Ação · Progresso · Construção · Execução

O que muda:

  • Scroll-driven animations
  • Stagger forte em entradas
  • Micro feedback em cada interação
  • Seções com sensação de avanço
  • CTAs mais frequentes

Usar quando: Cursos práticos, automação, “mãos na massa”.

🌊 PRESET 3 — Flow Learning⌗

Personalidade: Fluidez · Conexão · Aprendizado contínuo

O que muda:

  • Parallax mais presente
  • Transições orgânicas
  • Seções conectadas visualmente
  • Motion que guia o olhar
  • Menos quebras duras

Usar quando: Trilhas educacionais, storytelling, explicações profundas.

🚀 PRESET 4 — Future Impact⌗

Personalidade: Futurista · Visionário · Provocador

O que muda:

  • Neon accents pontuais
  • Partículas, grids, luzes
  • Motion mais dramático
  • Tipografia grande e ousada
  • Alto contraste visual

Usar quando: Manifestos, lançamentos, keynote, visão de futuro.

❤️ PRESET 5 — Human Pulse⌗

Personalidade: Humano · Empático · Próximo · Inspirador

O que muda:

  • Paleta mais quente (coral, lilás, azul claro)
  • Motion suave mas expressivo
  • Textos com entrada progressiva
  • Elementos orgânicos
  • Espaços acolhedores

Usar quando: Histórias, comunidade, comportamento humano, empatia.

🧠 COMO PENSAR OS PRESETS⌗

Cada preset mexe apenas em:

  • 🎨 Cor
  • 🎥 Motion
  • 🎶 Ritmo

E nunca em: ❌ Estrutura ❌ Mensagem central ❌ Pilares do INEMA.CLUB

📌 FRASE DE POSICIONAMENTO⌗

“INEMA.CLUB has one structure, one message, and multiple experiential presets.”

===============================

🔹 1. Variação de ESTRUTURA **⌗

Ex.: One-page, SaaS, Authority, Creative, Conversion → Define a ordem e o fluxo do site.

🔹 2. Variação de IDENTIDADE VISUAL⌗

Mesmo conteúdo, sensação completamente diferente.

Exemplos:

  • Glassmorphism (vidro, blur, Apple-style)
  • Brutalismo digital
  • Minimal premium
  • Neo-futurista / cyber
  • Editorial / luxury

👉 IA muda cores, tipografia, materiais e contraste.

🔹 3. Variação de MOTION & INTERAÇÃO⌗

Define como o site se move.

Exemplos:

  • Zero motion (estático, editorial)
  • Microinterações sutis
  • Parallax suave
  • Scrollytelling pesado
  • Motion cinematográfico

👉 Impacta percepção de qualidade e modernidade.

🔹 4. Variação de DENSIDADE DE CONTEÚDO⌗

Quanto o site fala.

Exemplos:

  • Ultra minimal (poucas palavras)
  • Equilibrado (copy + visual)
  • Informativo (text-heavy)
  • Visual-first (texto mínimo)

👉 IA ajusta espaçamento, ritmo e hierarquia.

🔹 5. Variação de TIPO DE CTA⌗

Define o objetivo principal.

Exemplos:

  • Conversão direta (Buy / Book / Sign up)
  • Exploração (View work / Learn more)
  • Relacionamento (Join / Subscribe)
  • Autoridade (Read insights)

🔹 6. Variação de DISPOSITIVO-PRIMEIRO⌗

Onde o design nasce.

Exemplos:

  • Mobile-first (app-like)
  • Desktop-first (cinematográfico)
  • Touch-first (quiosque / exposição)

🔹 7. Variação de TOM DA MARCA⌗

Como a marca fala.

Exemplos:

  • Técnica / corporativa
  • Confiante / premium
  • Criativa / ousada
  • Humana / próxima

🧠 O MODELO FINAL (direto)⌗

Vocês não têm um modelo de site. Vocês têm um framework com múltiplos eixos de variação:

SITE = Estrutura + Identidade Visual + Motion + Densidade de Conteúdo + Tipo de CTA + Dispositivo-primeiro + Tom de Voz

👉 Isso permite dezenas de combinações, mantendo:

  • Consistência
  • Qualidade
  • Previsibilidade com IA

Diretrizes de Marca

  • Detalhamento da – Diretrizes da Marca, incluindo:

  • Identidade visual (tipografia, cores, formas, materiais)

  • Motion & animações (física de fluidos, parallax, scrolltelling)
  • Experiência mobile com qualidade premium

  • Aprendizado de como traduzir estética e sensação em linguagem clara para IA.

  • Estruturação da Etapa 3 – Conteúdo, com:

  • Separação clara de cada seção do site no prompt

  • Definição de 3 tipos de instruções:

    1. O que entra (conteúdo)
    2. Como se organiza (UI / layout)
    3. Como deve parecer e se mover (estilo e visual) * Criação de um modelo final de estrutura de prompt, pronto para ser reutilizado. * Exemplo prático de detalhamento profundo de seções (como a Hero Section).

1.5/5 - Diretrizes de Marca

1

Recursos

↑ voltar ao topo · ver no Telegram ↗