PageSourceSearch

https://vortexia.live/blog

html vortexia.live collected 2026-10-04 06:47:20 UTC 21,885 bytes, 189 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7    <!--
8      The homepage shipped with NO meta description: not here, and not from
9      react-helmet either, since LandingPage sets none. Crawlers that do not
10      take the bot-prerender path - and every social or AI scraper reading raw
11      HTML - had nothing to quote. Kept identical to PAGE_META['/'] in
12      server/services/seoPrerender.js, which is what the prerendered homepage
13      serves; if you change one, change both.
14    -->
15    <!--
16      The tab icon is 64px / ~5KB. It used to point at favicon.png, which is a
17      1024x1024, 737KB image - fetched by every browser on a first visit purely
18      to draw a 16px square. The large file is still used, correctly, as the
19      logo in schema.org and social preview markup, where its size is the point.
20      Apple touch icons are displayed at up to 180px, so that one keeps the
21      larger source.
22    -->
23    <!--
24      THE FONTS ARE NOW ACTUALLY LOADED.
25
26      tailwind.config.js has declared `Inter` and `JetBrains Mono` since the
27      beginning and NEITHER WAS EVER FETCHED. Inter is not installed by default
28      on Windows, which is essentially the whole audience here - they are running
29      OBS - so most visitors were reading a 96px, weight-900, -2.4px-tracked
30      headline in Arial. That tracking was tuned for Inter's metrics and is wrong
31      for anything else. It is a large part of why the site reads as cheap, and
32      it was a missing link tag rather than a taste problem.
33
34      Space Grotesk is added for display text. Inter set everything at the
35      default, and the default is what made the whole site look unauthored -
36      Space Grotesk has actual character at large sizes and reads as technical
37      rather than corporate, which is the right register for a GPU engine sold to
38      DJs. Body copy stays Inter, which is the better workhorse when small.
39
40      Variable ranges rather than a list of static weights: one file per family
41      instead of six. preconnect because the font host is a second origin and the
42      handshake would otherwise sit in front of first paint. display=swap so text
43      renders immediately in the fallback rather than leaving the hero blank -
44      a hero that flashes unstyled is better than a hero that is invisible.
45    -->
46    <link rel="preconnect" href="https://fonts.googleapis.com" />
47    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
48    <link
49      rel="stylesheet"
50      href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Space+Grotesk:[email protected]&family=JetBrains+Mono:[email protected]&display=swap"
51    />
52    <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png" />
53    <link rel="apple-touch-icon" href="/favicon.png" />
54    <title>Vortexia Blog — Stream Visuals Tips, Guides &amp; News</title>
55    <meta name="description" content="Tips, tutorials, and guides for streamers. Learn OBS audio visualizer setup, stream overlay creation, and visual branding.">
56    <meta property="og:title" content="Vortexia Blog — Stream Visuals Tips, Guides &amp; News">
57    <meta property="og:description" content="Tips, tutorials, and guides for streamers. Learn OBS audio visualizer setup, stream overlay creation, and visual branding.">
58    <meta property="og:type" content="website">
59    <meta property="og:url" content="https://vortexia.live/blog">
60    <meta property="og:image" content="https://vortexia.live/og-image.png">
61    <meta property="og:site_name" content="Vortexia">
62    <meta name="twitter:card" content="summary_large_image">
63    <meta name="twitter:title" content="Vortexia Blog — Stream Visuals Tips, Guides &amp; News">
64    <meta name="twitter:description" content="Tips, tutorials, and guides for streamers. Learn OBS audio visualizer setup, stream overlay creation, and visual branding.">
65    <meta name="twitter:image" content="https://vortexia.live/og-image.png">
66    <link rel="canonical" href="https://vortexia.live/blog">
67    <style>
68      /* Custom scrollbar for cyberpunk feel */
69      ::-webkit-scrollbar {
70        width: 8px;
71        height: 8px;
72      }
73      ::-webkit-scrollbar-track {
74        background: #1a1410;
75      }
76      ::-webkit-scrollbar-thumb {
77        background: #ea580c;
78        border-radius: 4px;
79      }
80      ::-webkit-scrollbar-thumb:hover {
81        background: #f97316;
82      }
83
84      /* --- ANIMATIONS --- */
85
86      /* Fade Up */
87      @keyframes fadeInUp {
88        from { opacity: 0; transform: translateY(20px); }
89        to { opacity: 1; transform: translateY(0); }
90      }
91      .animate-fade-in-up {
92        animation: fadeInUp 0.8s ease-out forwards;
93      }
94      
95      /* Glitch Effect */
96      @keyframes glitch {
97        0% { transform: translate(0) }
98        20% { transform: translate(-2px, 2px) }
99        40% { transform: translate(-2px, -2px) }
100        60% { transform: translate(2px, 2px) }
101        80% { transform: translate(2px, -2px) }
102        100% { transform: translate(0) }
103      }
104      .animate-glitch:hover {
105        animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
106        text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9;
107      }
108
109      /* Neon Pulse */
110      @keyframes neonPulse {
111        0%, 100% { box-shadow: 0 0 5px rgba(249, 115, 22, 0.5), 0 0 20px rgba(249, 115, 22, 0.3); }
112        50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.4); }
113      }
114      .animate-neon-pulse {
115        animation: neonPulse 3s infinite;
116      }
117
118      /* Float */
119      @keyframes float {
120        0% { transform: translateY(0px); }
121        50% { transform: translateY(-10px); }
122        100% { transform: translateY(0px); }
123      }
124      .animate-float {
125        animation: float 6s ease-in-out infinite;
126      }
127
128      /* Scanline Overlay */
129      .scanlines {
130        background: linear-gradient(
131          to bottom,
132          rgba(255,255,255,0),
133          rgba(255,255,255,0) 50%,
134          rgba(0,0,0,0.2) 50%,
135          rgba(0,0,0,0.2)
136        );
137        background-size: 100% 4px;
138        pointer-events: none;
139      }
140
141      .image-pixelated {
142        image-rendering: pixelated;
143      }
144    </style>
145  
145<script type="module" crossorigin src="/assets/index-CNm2IhhZ.js"></script>
145
146  <link rel="modulepreload" crossorigin href="/assets/react-vendor-CXpB6dOV.js">
147  <link rel="modulepreload" crossorigin href="/assets/firebase-vendor-CFQDtUyc.js">
148  <link rel="stylesheet" crossorigin href="/assets/index-CkEhiizF.css">
149<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://vortexia.live/#organization","name":"Vortexia","url":"https://vortexia.live","logo":{"@type":"ImageObject","url":"https://vortexia.live/favicon.png","width":512,"height":512},"description":"Vortexia builds a free, browser-based, GPU-accelerated audio-reactive visual engine for live streamers and DJs.","sameAs":["https://kick.com/vortexialive","https://www.tiktok.com/@vortexlive"]},{"@type":"SoftwareApplication","@id":"https://vortexia.live/#software","name":"Vortexia","description":"Free, browser-based, GPU-accelerated audio-reactive visual engine for live streamers and DJs. Real-time fractal visuals for OBS, Streamlabs, Twitch, Kick, YouTube Live, and TikTok Live.","url":"https://vortexia.live","applicationCategory":"MultimediaApplication","applicationSubCategory":"AudioReactiveVisualizer","operatingSystem":"Web Browser (Chrome, Edge, Firefox, Safari, Brave)","browserRequirements":"Requires WebGL 2.0 and Web Audio API","softwareVersion":"2.1","offers":[{"@type":"Offer","name":"Free","price":"0","priceCurrency":"USD","category":"free"},{"@type":"Offer","name":"Plus","price":"49.99","priceCurrency":"USD","category":"annual"},{"@type":"Offer","name":"Pro","price":"119.99","priceCurrency":"USD","category":"annual"},{"@type":"Offer","name":"Lifetime","price":"149","priceCurrency":"USD","category":"lifetime","priceValidUntil":"2026-12-31"}],"creator":{"@id":"https://vortexia.live/#organization"},"image":"https://vortexia.live/og/home.png","featureList":["GPU-accelerated WebGL fractal rendering","13 one-tap presets across 8 engines (3 free), each fully adjustable afterwards","Real-time audio reactivity (bass/mid/treble bands)","Beat and tempo detection (onset detection, live BPM readout)","OBS Browser Source integration (no plugin)","Server-sent event sync between dashboard and viewer","Six distinct stream-event treatments: raid, hype train, donation, sub, bits, follow","Automatic event triggers on Twitch and YouTube; manual triggers and Stream Deck links on any platform","Renders at any aspect ratio, including 1080x1920 vertical for TikTok and dual-format streams"]},{"@type":"WebSite","@id":"https://vortexia.live/#website","url":"https://vortexia.live","name":"Vortexia","description":"Free, browser-based, GPU-accelerated audio-reactive visual engine for live streamers and DJs.","publisher":{"@id":"https://vortexia.live/#organization"},"inLanguage":"en"},{"@type":"FAQPage","@id":"https://vortexia.live/#faq","mainEntity":[{"@type":"Question","name":"What is Vortexia?","acceptedA
149nswer":{"@type":"Answer","text":"Vortexia is a free, browser-based, GPU-accelerated audio-reactive visual engine for live streamers and DJs. It generates real-time fractal visuals — Mandelbrot-derived shapes that pulse, morph, and react to your music's bass, mid, and treble frequencies. You add it to OBS as a single browser-source URL. No download, no install, no plugin."}},{"@type":"Question","name":"Is Vortexia free?","acceptedAnswer":{"@type":"Answer","text":"Yes. The free tier is forever free: 720p at 30 fps with a small Vortexia watermark, on one streaming platform at a time. Paid tiers — Plus ($4.99/month or $49.99/year), Pro ($14.99/month or $119.99/year), and Lifetime ($149 one-time, until 31 December 2026) — remove the watermark, unlock 1080p/60 and 4K/60, all eight engines including the two 3D ones, and multi-platform event triggers. No credit card required to start on the free tier."}},{"@type":"Question","name":"How does Vortexia work with OBS?","acceptedAnswer":{"@type":"Answer","text":"Add Vortexia as a Browser Source in OBS Studio. Copy your token-authenticated viewer URL from the Vortexia dashboard, paste it into OBS's Browser Source URL field, set the resolution to match your canvas (typically 1920×1080), and enable audio capture if you want the visuals to react to your stream. Visuals appear instantly and stay in sync via server-sent events whenever you change presets in the dashboard."}},{"@type":"Question","name":"Does Vortexia work with Twitch, Kick, YouTube Live, and TikTok Live?","acceptedA
149nswer":{"@type":"Answer","text":"Yes. Vortexia is platform-agnostic — it works with any streaming software that supports a Browser Source (OBS Studio, Streamlabs, OBS-bsd forks). Once it's in your scene, the same visuals stream to whatever platform OBS is broadcasting to: Twitch, Kick, YouTube Live, TikTok Live, Trovo, Facebook Gaming, or any RTMP destination."}},{"@type":"Question","name":"Does Vortexia require an account or download?","acceptedAnswer":{"@type":"Answer","text":"There is nothing to download, no plugin to install, and no app to update. An account is required only to save presets and copy your OBS Browser Source URL. Vortexia runs entirely in your browser via WebGL 2.0 — Chrome, Edge, Firefox, Safari, and Brave are all supported. Sign-in is via Google or email."}},{"@type":"Question","name":"Does Vortexia react to Twitch events, or only to audio?","acceptedAnswer":{"@type":"Answer","text":"Both. Most visualizers only analyse sound, which cannot tell them that someone just raided you. Vortexia subscribes to Twitch EventSub and gives six events their own distinct treatment: a raid pulls the camera back and sweeps a bright band outward, a hype train runs a slow sustained swirl, a donation shakes the frame with a golden ring, a sub twists the whole frame, bits sparkle without distortion, and a follow sends a soft ripple. YouTube Super Chats and new members work the same way, and so do Kick follows, subs, gifted subs and Kicks. TikTok and Facebook events are not read automatically, so you fire those yourself with a button, a keyboard shortcut or a trigger link from a Stream Deck."}},{"@type":"Question","name":"Can Vortexia render vertical visuals for TikTok or a dual-format stream?","acceptedA
149nswer":{"@type":"Answer","text":"Yes, with no separate setting. Vortexia renders at whatever size the browser source is, so setting an OBS Browser Source to 1080x1920 gives you a true vertical render rather than a cropped widescreen one. That means one Vortexia URL can serve a horizontal Twitch output and a vertical TikTok or Twitch-vertical output at the same time. The dashboard also records 15-second vertical clips at 1080x1920 for posting to TikTok, Reels or Shorts."}},{"@type":"Question","name":"What visual styles or presets does Vortexia have?","acceptedAnswer":{"@type":"Answer","text":"Thirteen presets across eight engines, each a complete look in one tap. Cyberpunk Neon, Lava Flow and Deep Ocean work on the free plan. Plus ($4.99/month) adds Aurora Veil for calm curtains of light, Plasma Drift for smooth lo-fi colour, Hyperwarp for travelling starlight, Caustics for light through moving water, Liquid Neon, Bass Tunnel which lands on the kick drum for DJ sets, Mandala for symmetrical geometry, Void Spike for something darker, and two raymarched 3D engines, Mandelbulb and Menger Temple. Every preset is a starting point: colour, symmetry and depth stay adjustable afterwards, so no two setups have to look alike."}},{"@type":"Question","name":"What audio sources can Vortexia react to?","acceptedA
149nswer":{"@type":"Answer","text":"Vortexia reads audio in real time via the browser's Web Audio API. You can capture your microphone, your stream's music, your gameplay audio, or any system audio routed through a virtual cable. The engine analyzes the FFT spectrum and separates bass (0–250 Hz), mid (250–4000 Hz), and treble (4000–20000 Hz) bands, then maps each to different visual parameters — zoom, color shift, iteration depth, and motion."}},{"@type":"Question","name":"Can I trigger effects from a Stream Deck?","acceptedAnswer":{"@type":"Answer","text":"Yes. Open Trigger Links in the dashboard and create your private link, then paste one URL per effect into a Stream Deck key (the free API Ninja or API Request plugin), a Touch Portal button, Bitfocus Companion, or a Streamer.bot Fetch URL sub-action. TikFinity can call the same link when a TikTok gift arrives, so gifts fire effects automatically. Trigger links are included on every plan, and the dashboard also has trigger buttons and Shift+Alt+1 to 6 shortcuts."}}]}]}</script>
149
150</head>
151  <body class="bg-slate-950 text-white overflow-x-hidden selection:bg-blue-500/30">
152    <!-- OBS Browser Source Audio Bootstrap: Silent audio track for OBS CEF detection -->
153    <!-- Must exist BEFORE React loads. OBS decides audio availability at page parse time. -->
154    <!-- CRITICAL: Cannot use display:none - OBS CEF ignores hidden media elements -->
155    <audio
156      id="obs-silent-carrier"
157      autoplay
158      loop
159      style="position: absolute; width: 1px; height: 1px; opacity: 0.001; pointer-events: none;"
160    >
161      <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA" type="audio/wav">
162    </audio>
163    
163<script>
164      var a = document.getElementById('obs-silent-carrier');
165      if (a) a.volume = 0;
166    </script>
166
167    <div id="seo-content" style="font-size:14px;color:#a99c91;max-width:960px;margin:0 auto;padding:24px 16px;line-height:1.8;font-family:inherit"><main><h1>Vortexia Blog — Stream Visuals Tips, Guides &amp; News</h1>
168<p>Tips, tutorials, and guides for streamers. Learn OBS audio visualizer setup, stream overlay creation, and visual branding. Stay up to date with the latest streaming visual techniques.</p>
169<h2>All Articles</h2><ul><li><a href="/blog/how-to-add-audio-reactive-visuals-to-twitch-stream">How to Add Audio Reactive Visuals to Your Twitch Stream | Vortexia</a> — Step-by-step guide to adding beat-synced audio reactive visuals to Twitch using OBS browser source and Vortexia. Free, no download needed. (8 min read)</li><li><a href="/blog/obs-browser-source-setup-guide">OBS Browser Source Guide: Settings &amp; Hardware Acceleration</a> — How to add a Browser Source in OBS, what every setting does, and whether to enable browser source hardware acceleration. Plus fixes for common problems. (6 min read)</li><li><a href="/blog/5-ways-to-make-your-stream-stand-out">5 Ways to Make Your Stream Stand Out | Vortexia Blog</a> — Practical tips to make your Twitch, Kick, or TikTok Live stream more visually engaging with animated overlays and audio reactive backgrounds. (6 min read)</li><li><a href="/blog/stream-overlays-vs-live-visuals">Stream Overlays vs. Live Visuals — What's the Difference? | Vortexia</a> — Understand the difference between static stream overlays and real-time audio reactive visuals. (7 min read)</li><li><a href="/blog/setup-vortexia-with-streamlabs">How to Use Vortexia with Streamlabs Desktop | Vortexia</a> — Add Vortexia audio reactive visuals to Streamlabs Desktop. Step-by-step browser source setup guide for streamers. (6 min read)</li><li><a href="/blog/best-fractal-settings-for-music-streams">Best Fractal Visualizer Settings for Music Streams | Vortexia</a> — Optimize your Vortexia fractal visualizer for music streaming — best settings for techno, lofi, and psytrance. (5 min read)</li><li><a href="/blog/twitch-event-reactive-visuals-guide">Twitch Event-Reactive Visuals Guide | Vortexia</a> — Configure Vortexia to react to Twitch follows, subs, and donations. Complete guide to event-triggered animations. (7 min read)</li><li><a href="/blog/streaming-on-kick-tiktok-visual-setup">Visual Setup Guide for Kick &amp; TikTok Live Streaming | Vortexia</a> — How to set up Vortexia audio visualizer visuals for Kick and TikTok Live streams. OBS browser source tutorial included. (5 min read)</li><li><a href="/blog/synesthesia-live-free-alternative">Synesthesia Live Free Alternative — Vortexia for Streamers | Vortexia Blog</a> — Synesthesia Live is powerful paid software. Vortexia gives you real-time audio-reactive visuals free in your browser with native OBS support and no setup required. (6 min read)</li><li><a href="/blog/magic-music-visuals-free-alternative">Magic Music Visuals Free Alternative in 2026 | Vortexia Blog</a> — Magic Music Visuals is paid desktop software. Vortexia is browser-based, starts free, and works natively in OBS with no download. Compare them here. (6 min read)</li><li><a href="/blog/what-is-the-mandelbrot-set">What Is the Mandelbrot Set? A Plain-English Explanation</a> — The Mandelbrot set is the set of complex numbers c for which the sequence z → z² + c stays bounded. Here is what that means, why it looks the way it does, and how to explore it live in your browser. (9 min read)</li><li><a href="/blog/famous-mandelbrot-zoom-coordinates">Famous Mandelbrot Zoom Coordinates (With Live One-Click Links)</a> — A curated tour of the Mandelbrot set's most famous regions — Seahorse Valley, Elephant Valley, the Triple Spiral, mini-Mandelbrots and more — each with the exact coordinates and a live link that opens it in your browser. (7 min read)</li><li><a href="/blog/mandelbrot-renderer-webgl-shader">How to Render the Mandelbrot Set in Real Time with a WebGL Shader</a> — A practical walkthrough of how Vortexia renders the Mandelbrot set at 60fps in the browser: the escape-time loop as a GLSL fragment shader, smooth coloring, coordinate mapping, and the single-precision limit that caps how deep you can zoom. (10 min read)</li><li><a href="/blog/stream-deck-obs-visual-effects">Fire OBS Visual Effects From a Stream Deck</a> — One private link per effect puts a sub, raid or hype train visual on a Stream Deck key, Touch Portal, Companion, Streamer.bot or a TikTok gift. (6 min read)</li></ul>
170<p><a href="/demo">Try Vortexia Free</a> | <a href="/pricing">View Pricing</a></p></main></div>
171    <div id="root" class="h-screen w-screen"></div>
172    
172<script>
173      // OBS Browser Source Bootstrap: Capture /viewer query params for ViewerPage
174      // Token is passed in URL: /viewer?token=X
175      // BrowserRouter handles the /viewer route directly - no hash redirect needed
176      (function() {
177        if (window.location.pathname === '/viewer') {
178          var search = window.location.search;
179          if (search) {
180            // Store query params (token) in sessionStorage for ViewerPage to read
181            // This persists the token even if URL gets modified
182            sessionStorage.setItem('vortexia_viewer_params', search);
183          }
184          // No redirect - BrowserRouter handles /viewer route directly
185        }
186      })();
187    </script>
187
188  </body>
189</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.