🔌 Teknik

Streaming Arayüzünde Karakter Karakter Yazı Efekti Nasıl Yapılır?

19 Ekim 2026· 2 dk okuma· Apicloud Blog

🔌

Giriş: Neden Streaming Arayüzü ve Karakter Efekti?

Günümüzde modern web ve mobil uygulamalarda, özellikle chatbot arayüzleri, sesli asistanlar ve akış tabanlı içerik sunan platformlar için dinamik yazı efektleri büyük önem taşıyor. Kullanıcıların metni adım adım okuması, hem görsel çekicilik sağlıyor hem de bilginin daha iyi sindirilmesini amaçlıyor. Bu yazıda, bir streaming arayüzünde karakter karakter yazı efekti (typewriter effect) nasıl uygulanacağına dair teknik olarak uygulanabilir bir rehber sunuyoruz.

Temel Mantık: Stream ve Karakter Bazlı Güncelleme

Karakter karakter yazı efektinin temelinde şu yatar: arka planda bir metin akışı (stream) vardır ve bu akış karakter karakter ekrana işlenir. Her seferinde bir karakter eklenir ve arayüz buna göre güncellenir.

Bunu gerçekleştirmek için genel olarak şu adımlar izlenir:

Metin kaynağı hazır edilir (örneğin bir API yanıtı, bir dosya veya doğrudan sabit bir metin dizisi).
Zamanlayıcı ile karakterler arası gecikme ayarlanır.
Arayüz bileşeni, her adımda mevcut metni güncelleyerek ekranda gösterir.
Akış tamamlandığında, son karakter de gösterilir ve efekt sona erer.

Bu mantığı JavaScript, TypeScript veya herhangi bir modern frontend framework'ünde (React, Vue, Svelte vb.) kolayca hayata geçirebilirsiniz.

JavaScript ile Basit Bir Uygulama Örneği

Aşağıda, vanilla JavaScript kullanarak bir metni karakter karakter ekrana yazdıran basit bir örnek verilmiştir:

const targetElement = document.getElementById('stream-output');
const fullText = 'Merhaba! Bu bir streaming yazı efektidir.';
let index = 0;
const delay = 60; // milisaniye cinsinden karakter başına gecikme

function typeNextCharacter() {
  if (index < fullText.length) {
    targetElement.textContent += fullText.charAt(index);
    index++;
    setTimeout(typeNextCharacter, delay);
  }
}

typeNextCharacter();

Bu örnek, basit bir HTML sayfasında stream-output ID'li bir elemana metni karakter karakter ekler. delay değerini artırarak yazı daha yavaş, azaltarak daha hızlı yazılmasını sağlayabilirsiniz.

React ile Güncel Uygulama

React kullanıyorsanız, durumu yönetmek için useState ve useEffect hook'larını kullanmak daha temiz bir yapı sunar:

import { useState, useEffect } from 'react';

function StreamText({ text, delay = 50 }) {
  const [displayed, setDisplayed] = useState('');
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (index < text.length) {
      const timer = setTimeout(() => {
        setDisplayed(prev => prev + text[index]);
        setIndex(prev => prev + 1);
      }, delay);
      return () => clearTimeout(timer);
    }
  }, [index, text, delay]);

  return <p>{displayed}</p>;
}

export default StreamText;

Bu bileşen, text prop'u olarak alınan bir metni karakter karakter ekrana basar. delay ile hızı ayarlayabilirsiniz.

Performans ve İyileştirme Önerileri

Büyük metinlerde sürekli setTimeout kullanımı bellek ve performans açısından sorun çıkarabilir. Bu durumda requestAnimationFrame veya kuyruk tabanlı işleyiciler tercih edilebilir.
Kesme ve devam özelliği eklemek için akışı durdurup yeniden başlatabilecek fonksiyonlar tasarlanmalıdır.
Responsive tasarımda, yazı boyutu ve hızı ekran genişliğine göre ayarlanabilir.

Bu adımları izleyerek, streaming arayüzünüzde kullanıcı deneyimini güçlendiren profesyonel bir yazı efekti oluşturabilirsiniz.