Veja como criar um lindo #componente você sabia com #javascript e CSS.

Este componente exibe curiosidades programadas que aparecem com efeito de máquina de escrever, proporcionando uma experiência dinâmica ao usuário. Ele é ideal para destacar informações técnicas, novidades ou fatos interessantes em portais educacionais ou #sistemas voltados para programadores. Além disso, oferece controles interativos para iniciar, parar e ajustar a velocidade da exibição, permitindo testes e personalização fácil.

Código completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Efeito Máquina de Escrever</title>
 <style>
 body {
 font-family: 'Courier New', monospace;
 background: #0a0a0a ;
 color: #fff ;
 margin: 20px;
 padding: 0;
 }
 
 .demo-controls {
 margin-top: 20px;
 padding: 15px;
 background: #2a2a2a ;
 border-radius: 4px;
 }
 
 .demo-controls button {
 background: #00bfff ;
 color: white;
 border: none;
 padding: 8px 16px;
 margin: 5px;
 border-radius: 4px;
 cursor: pointer;
 font-family: inherit;
 }
 
 .demo-controls button:hover {
 background: #0099cc ;
 }
 
 .speed-control {
 margin: 10px 0;
 }
 
 .speed-control label {
 color: #ccc ;
 margin-right: 10px;
 }
 
 .speed-control input {
 margin: 0 10px;
 }
 
 #voce -sabia {
 background: #1e1e1e ;
 color: #ccc ;
 padding: 12px 20px;
 border-left: 4px solid #00bfff ;
 font-size: 14px;
 margin-bottom: 20px;
 border-radius: 4px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 .titulo {
 color: #00bfff ;
 font-weight: bold;
 }
 
 #curiosidade  {
 margin-left: 8px;
 position: relative;
 }
 
 /* Cursor piscante */
 #curiosidade ::after {
 content: '|';
 color: #00bfff ;
 animation: blink 1s infinite;
 font-weight: bold;
 }
 
 @keyframes blink {
 0%, 50% { opacity: 1; }
 51%, 100% { opacity: 0; }
 }
 

 </style>
</head>
<body>
 <div id="voce-sabia">
 <span class="titulo">Você sabia?</span>
 <span id="curiosidade"></span>
 </div>
 
 <div class="demo-controls">
 <h3 style="color: #00bfff ; margin-top: 0;">Controles da Demo</h3>
 <button onclick="iniciarEfeito()">Iniciar</button>
 <button onclick="pararEfeito()">Parar</button>
 <button onclick="proximaCuriosidade()">Próxima</button>
 
 <div class="speed-control">
 <label>Velocidade:</label>
 <input type="range" id="velocidade" min="10" max="200" value="80" onchange="ajustarVelocidade()">
 <span id="velocidade-valor">80ms</span>
 </div>
 </div>
 


 <script>
 const curiosidades = [
 "No JavaScript, `NaN !== NaN` é verdadeiro!",
 "Em PHP, `empty([])` retorna true — arrays vazios são considerados vazios!",
 "`let` no JavaScript tem escopo de bloco, `var` não.",
 "O CodeIgniter 4 é totalmente orientado a objetos.",
 "`localStorage` salva dados mesmo após fechar o navegador.",
 "Você pode usar `nth-child(odd)` no CSS para estilizar linhas alternadas!",
 "JavaScript foi criado em apenas 10 dias por Brendan Eich!",
 "CSS Grid pode criar layouts complexos com apenas algumas linhas!",
 "O `console.table()` exibe arrays e objetos em formato de tabela!",
 "PHP significa 'PHP: Hypertext Preprocessor' (acrônimo recursivo)!",
 "O `===` no JavaScript compara valor E tipo, `==` apenas valor.",
 "CSS flexbox resolve 90% dos problemas de alinhamento!",
 "O `async/await` torna código assíncrono mais legível que Promises.",
 "Em PHP, você pode usar `??` para verificar se uma variável existe.",
 "O `document.querySelector()` é mais poderoso que `getElementById()`.",
 "CSS custom properties (variáveis) funcionam em tempo real!",
 "JavaScript possui 'hoisting' - declarações são movidas para o topo.",
 "O CodeIgniter usa o padrão MVC (Model-View-Controller).",
 "O `console.time()` e `console.timeEnd()` medem performance!",
 "PHP 8 introduziu Union Types e Named Arguments.",
 "O `Array.from()` pode converter qualquer coisa em array!",
 "CSS `:has()` é como um 'parent selector' que sempre quisemos!",
 "O `fetch()` API substituiu o antigo XMLHttpRequest.",
 "Em PHP, `null coalescing assignment` (??=) atribui se for null.",
 "JavaScript Map e Set são mais eficientes que Object e Array para certas tarefas.",
 "CSS Container Queries permitem responsividade baseada no container!",
 "O `structuredClone()` faz deep copy de objetos nativamente!",
 "PHP Fibers permitem programação assíncrona sem callbacks.",
 "O `AbortController` pode cancelar fetch requests em JavaScript!",
 "CSS `:is()` e `:where()` simplificam seletores complexos!",
 "O `BigInt` em JavaScript trabalha com números maiores que 2^53!",
 "PHP 8.1 trouxe Enums nativos para o language!",
 "CSS `aspect-ratio` mantém proporções sem JavaScript!",
 "O `?.` (optional chaining) evita erros em propriedades undefined!",
 "Em PHP, `match` é mais poderoso que `switch`!",
 "JavaScript `WeakMap` e `WeakSet` permitem garbage collection automático!",
 "CSS `clamp()` cria valores responsivos com min, max e preferido!",
 "O `Intl` API formata datas, números e strings por localização!",
 "PHP attributes (# annotations) substituem docblocks!",
 "CSS `@layer` controla a cascata e especificidade!",
 "O `queueMicrotask()` agenda tarefas na microtask queue!",
 "CodeIgniter 4 usa Composer para gerenciamento de dependências!",
 "CSS `@supports` testa suporte a propriedades antes de aplicar!",
 "JavaScript Proxy pode interceptar e customizar operações em objetos!",
 "PHP 8.2 introduziu readonly classes!",
 "CSS `scroll-behavior: smooth` cria rolagem suave sem JS!",
 "O `Reflect` API fornece métodos para operações interceptáveis!",
 "Em PHP, você pode usar `yield` para criar generators!",
 "CSS `:focus-visible` aplica estilos apenas no foco via teclado!",
 "JavaScript `Temporal` API vai substituir o problemático Date!",
 "PHP JIT (Just-In-Time) compilation pode acelerar código em até 3x!",
 "CSS `gap` funciona tanto em Grid quanto em Flexbox!",
 "O `ResizeObserver` detecta mudanças de tamanho em elementos!",
 "CodeIgniter 4 tem hot reloading em desenvolvimento!",
 "CSS `color-mix()` mistura cores como um photoshop!",
 "JavaScript `top-level await` permite await fora de funções async!",
 "PHP 8.3 trouxe readonly properties em classes!",
 "CSS `@starting-style` define estilos iniciais para animações!",
 "O `scheduler.postTask()` controla prioridade de tarefas!",
 "Em PHP, `array_is_list()` verifica se é um array sequencial!",
 "CSS View Transitions API anima entre páginas como SPA!"
 ];
 
 let letraIndex = 0;
 let curiosidadeAtual = "";
 let delayEntreLetras = 80;
 let delayEntreFrases = 3000;
 let timeoutId = null;
 let intervalId = null;
 let rodando = false;
 
 function escreverCuriosidade() {
 const span = document.getElementById("curiosidade");
 
 if (letraIndex < curiosidadeAtual.length) {
 span.textContent += curiosidadeAtual.charAt(letraIndex);
 letraIndex++;
 timeoutId = setTimeout(escreverCuriosidade, delayEntreLetras);
 } else {
 // Aguarda antes de mostrar a próxima curiosidade
 timeoutId = setTimeout(proximaCuriosidade, delayEntreFrases);
 }
 }
 
 function proximaCuriosidade() {
 if (!rodando) return;
 
 const span = document.getElementById("curiosidade");
 curiosidadeAtual = curiosidades[Math.floor(Math.random() * curiosidades.length)];
 span.textContent = "";
 letraIndex = 0;
 escreverCuriosidade();
 }
 
 function iniciarEfeito() {
 if (rodando) return;
 
 rodando = true;
 proximaCuriosidade();
 }
 
 function pararEfeito() {
 rodando = false;
 if (timeoutId) {
 clearTimeout(timeoutId);
 timeoutId = null;
 }
 }
 
 function ajustarVelocidade() {
 const slider = document.getElementById("velocidade");
 const valorSpan = document.getElementById("velocidade-valor");
 delayEntreLetras = parseInt(slider.value);
 valorSpan.textContent = delayEntreLetras + "ms";
 }
 
 // Iniciar automaticamente quando a página carregar
 document.addEventListener("DOMContentLoaded", function() {
 console.log("DOM carregado, iniciando efeito...");
 iniciarEfeito();
 });
 
 // Cleanup quando a página for fechada
 window.addEventListener("beforeunload", pararEfeito);
 </script>
</body>
</html>

 

Adapte e use.