Internal · Frontend

Component gallery

Live previews and copy-paste snippets for the Wiener frontend team. Every component lives inside our monochrome palette and Sora type system.

Reference catalog for Wiener Labs teams.

PixelBlast

WebGL pixel-grid arka plan. Click ripple, ortam akışı, pause-when-offscreen.

tsx

<PixelBlast
  variant="square"
  pixelSize={4}
  color="#000000"
  patternScale={2.4}
  patternDensity={1.05}
  pixelSizeJitter={0.4}
  enableRipples
  rippleSpeed={0.3}
  rippleThickness={0.12}
  rippleIntensityScale={1.2}
  speed={0.4}
  edgeFade={0.35}
  transparent
/>

TypewriterTitle

Yazı dizilerini sırayla yazıp silen, doğal varyanslı caret animasyonu.

tsx

<TypewriterTitle
  sequences={[
    { text: "compress.", deleteAfter: true },
    { text: "convert.",  deleteAfter: true },
    { text: "edit.",     deleteAfter: true },
    { text: "generate.", deleteAfter: true }
  ]}
  autoLoop
  naturalVariance
/>

MagnetLines

Pointer pozisyonuna göre dönen çizgi grid’i, vanilla DOM.

tsx

<MagnetLines
  rows={10}
  columns={12}
  containerSize="min(420px, 80vw)"
  lineColor="rgba(0, 0, 0, 0.55)"
  lineWidth="2px"
  lineHeight="22px"
  baseAngle={-10}
/>

Cubes

3D CSS cube grid. Tilt-on-hover + click ripple, opsiyonel auto-animate.

tsx

<Cubes
  gridSize={8}
  maxAngle={28}
  radius={3}
  borderStyle="1px solid rgba(0, 0, 0, 0.18)"
  faceColor="#000000"
  rippleColor="#ffffff"
  rippleSpeed={1.5}
  autoAnimate
  rippleOnClick
  cellSize={48}
/>

FallingText

matter.js destekli kelime fizik animasyonu. Hover ya da scroll ile tetiklenir.

tsx

<FallingText
  text={page.fallingHero.text}
  highlightWords={page.fallingHero.highlightWords}
  highlightClass="ft-highlighted"
  trigger="hover"
  backgroundColor="transparent"
  wireframes={false}
  gravity={0.56}
  fontSize="2rem"
  mouseConstraintStiffness={0.9}
/>

CodeBlock

Bu sayfanın kullandığı kod kutusu. Kopya butonu + dil etiketi.

tsx

<CodeBlock
  language="tsx"
  code={`<TypewriterTitle autoLoop naturalVariance />`}
/>

tsx

<CodeBlock
  language="tsx"
  code={`<TypewriterTitle autoLoop naturalVariance />`}
/>

SplitText

Karakter / kelime / satır bazında stagger’li giriş animasyonu. IntersectionObserver tetikli.

tsx

<SplitText
  text="Hello, you!"
  className="text-2xl font-semibold text-center"
  delay={50}
  duration={1.25}
  ease="easeOut"
  splitType="chars"
  from={{ opacity: 0, y: 40 }}
  to={{ opacity: 1, y: 0 }}
  threshold={0.1}
  rootMargin="-100px"
  textAlign="center"
/>

BlurText

Blur+offset’ten kelime/karakter sırasıyla netleşme. Yön (top/bottom/left/right) seçilebilir.

tsx

<BlurText
  text="Isn't this so cool?!"
  delay={200}
  animateBy="words"
  direction="top"
  className="text-2xl mb-8"
/>

CircularText

Sürekli dönen dairesel yazı. Hover’da hızlanır / yavaşlar / durur / çıldırır.

tsx

<CircularText
  text="WIENER*TOOLS*COMPONENTS*"
  onHover="speedUp"
  spinDuration={20}
/>

TextType

Çoklu metin sırasıyla yazılır + silinir. Sabit veya değişken hız, özelleştirilebilir caret.

tsx

<TextType
  text={["Text typing effect", "for your websites", "Happy coding!"]}
  typingSpeed={75}
  pauseDuration={1500}
  showCursor
  cursorCharacter="_"
  deletingSpeed={50}
  cursorBlinkDuration={0.5}
/>

Shuffle

Karakterler rastgele harflerden geçerek hedefe oturur. Hover veya viewport tetikli.

tsx

<Shuffle
  text="Hello World"
  shuffleDirection="right"
  duration={0.35}
  animationMode="evenodd"
  shuffleTimes={1}
  stagger={0.03}
  threshold={0.1}
  triggerOnce={true}
  triggerOnHover
  respectReducedMotion={true}
  loop={false}
  loopDelay={0}
/>

ShinyText

Metin üzerinden geçen parlak bant. Pure CSS, mask + linear-gradient.

✨ Shiny Text Effect

tsx

<ShinyText
  text="✨ Shiny Text Effect"
  speed={2}
  color="#000000"
  shineColor="#ffffff"
  spread={120}
  direction="left"
  yoyo={false}
  pauseOnHover={false}
/>

TextPressure

Variable font (Compressa VF) + cursor mesafesine bağlı weight/width/italic. Mouse’a yaklaştırın.

Wiener!

tsx

<div style={{ position: "relative", height: "300px" }}>
  <TextPressure
    text="Hello!"
    flex
    alpha={false}
    stroke={false}
    width
    weight
    italic
    textColor="#000000"
    strokeColor="#ffffff"
    minFontSize={36}
  />
</div>

StickerPeel

Hover’da köşeden kıvrılan sticker efekti. Drag ile yerleştirilebilir; logomuzla sahnede.

tsx

<StickerPeel
  imageSrc="/icon-512.png"
  width={200}
  rotate={0}
  peelBackHoverPct={30}
  peelBackActivePct={40}
  shadowIntensity={0.5}
  lightingIntensity={0.1}
  initialPosition={{ x: 0, y: 0 }}
  peelDirection={0}
/>

FaultyTerminal

WebGL CRT terminal — karakter grid, scanlines, glitch, flicker, curvature. Mouse’a tepki verir.

tsx

<div style={{ width: "100%", height: 600, position: "relative" }}>
  <FaultyTerminal
    scale={1.5}
    gridMul={[2, 1]}
    digitSize={1.2}
    timeScale={0.5}
    pause={false}
    scanlineIntensity={0.5}
    glitchAmount={1}
    flickerAmount={1}
    noiseAmp={1}
    chromaticAberration={0}
    dither={0}
    curvature={0.1}
    tint="#A7EF9E"
    mouseReact
    mouseStrength={0.5}
    pageLoadAnimation
    brightness={0.6}
  />
</div>

Dither

Bayer-dithered sinüs dalga. Mouse imleci yakınlığa göre dalgayı bozar.

tsx

<div style={{ width: "100%", height: 600, position: "relative" }}>
  <Dither
    waveColor={[0.5, 0.5, 0.5]}
    disableAnimation={false}
    enableMouseInteraction
    mouseRadius={0.3}
    colorNum={4}
    waveAmplitude={0.3}
    waveFrequency={3}
    waveSpeed={0.05}
  />
</div>

GradientBlinds

Dikey gradient bantlar + imleci takip eden spotlight. Blend-mode ile efekt katmanlanır.

tsx

<div style={{ width: "100%", height: 600, position: "relative" }}>
  <GradientBlinds
    gradientColors={["#FF9FFC", "#5227FF"]}
    angle={0}
    noise={0.3}
    blindCount={12}
    blindMinWidth={50}
    spotlightRadius={0.5}
    spotlightSoftness={1}
    spotlightOpacity={1}
    mouseDampening={0.15}
    distortAmount={0}
    shineDirection="left"
    mixBlendMode="lighten"
  />
</div>