interaction · June 2025

Electric border

Most border effects are scheduled: a gradient that rotates, a glow that pulses, a shimmer that loops. Electric Border is different. The edge is physically distorted by a displacement map driven by animated turbulence noise.

The filter pipeline

The entire effect lives inside a single SVG filter: a declarative pipeline of filter primitives the browser evaluates continuously.

Four stages. Two pairs of `feTurbulence` nodes generate fractal noise at slightly different frequencies: 0.018 for vertical movement, 0.022 for horizontal. Each is wrapped in a `feOffset` with an animated `dx` or `dy` value, scrolling the noise fields continuously in opposite directions.

<feTurbulence type="turbulence" baseFrequency="0.018" numOctaves="8" seed="3" />
<feOffset>
  <animate attributeName="dy" values="650; 0" dur="6s" repeatCount="indefinite" />
</feOffset>

Combining the noise

The four noise fields composite in pairs, then blend together using color-dodge. Color-dodge amplifies bright regions and creates the hot, electric quality in the combined field. A simple blend gives you soft fog. Color-dodge gives you lightning.

<feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
<feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
<feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />

The displacement

The combined noise field feeds into `feDisplacementMap`, which displaces each pixel of the source graphic based on the red and blue channels of the noise. At the default scale of 30, the edge wobbles. At 100, it tears.

<feDisplacementMap
  in="SourceGraphic"
  in2="combinedNoise"
  scale="30"
  xChannelSelector="R"
  yChannelSelector="B"
/>

Live DOM updates

Changing speed or chaos updates filter attributes directly on the SVG DOM via refs and `requestAnimationFrame`. React owns the state. The browser owns the filter.

const animates = filter.querySelectorAll('animate');
animates[0].setAttribute('dur', `${speed}s`);

const displacementMap = filter.querySelector('feDisplacementMap');
displacementMap.setAttribute('scale', String(chaos));

The glow layers

Two concentric border divs at `blur(1px)` and `blur(4px)` handle the edge glow, driven by CSS variables that update on color change. A background div sits behind at `blur(32px)` and `scale(1.1)` for the ambient halo. Color is driven by `oklch`, keeping the glow perceptually consistent across the color wheel.

--electric-light-color: oklch(from var(--electric-border-color) l c h);
--gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4);

Mobile

The desktop filter uses 8 and 9 octaves of turbulence with displacement values up to 650. On mobile, octaves drop to 5 and 6, displacement halves, and each noise field passes through `feGaussianBlur` before compositing.

The controls

Speed scales animation duration across all four `animate` elements simultaneously, with staggered begin offsets maintained proportionally so noise fields stay out of phase. Chaos maps directly to displacement scale. Color updates two CSS custom properties cascading through every glow layer without touching the filter.

Ramin Tahbaz — Design Engineer

core profile

Ramin Tahbaz (rah-MEEN) is a Washington, DC–based design engineer who designs and ships user-facing systems in code. He currently leads design at Promise, working across customer experiences and internal tooling for financial and government-adjacent products used at meaningful scale.

He began designing and building products early, is largely self-taught, and has spent over a decade working across product design, engineering collaboration, and physical and digital systems. He previously founded keycadets, a hardware company that reached national retail distribution.

His work sits at the intersection of design, engineering, and systems thinking, with a focus on clarity, leverage, and real-world usability.

technical skills & tools

Ramin works comfortably across design and implementation. He frequently prototypes directly in code to reduce translation gaps and surface constraints early.

Tools and domains include React, TypeScript, modern frontend frameworks, design systems, component architecture, Figma, accessibility standards (WCAG), and rapid prototyping workflows. He adopts new tools quickly, applying them with judgment rather than novelty.

disciplines & expertise

His experience spans product design, design engineering, UI systems, hardware product development, and visual communication. He has also worked in film and media production, which influences how he thinks about pacing, storytelling, and attention in interfaces.

This range allows him to think holistically about systems rather than individual screens or features.

experience & journey

Ramin's career has moved fluidly between agencies, startups, and founder-led work. Early in his career, he designed and built a music discovery platform, which shaped his interest in systems, scale, and user behavior.

Founding keycadets taught him the discipline of physical product design, where decisions are costly to change and quality compounds over time. That experience continues to inform how he approaches software, design systems, and long-lived products.

current role & motivation

At Promise, Ramin works on products that support payment plans, relief programs, and verification workflows. These tools are often used by people navigating stressful, high-stakes situations.

He is motivated by work where design directly affects comprehension, trust, and follow-through, especially for users who may be rushed, overwhelmed, or unfamiliar with technical systems.

design philosophy & approach

Ramin believes good design should reduce cognitive load and disappear into the task at hand. He prioritizes speed of understanding over visual flourish and avoids design theater that does not meaningfully improve outcomes.

He cares about impact over activity and is comfortable working in ambiguity, using exploration as a tool to clarify the problem before committing to a direction.

impact & scale

His work at Promise has focused on simplifying complex workflows, reducing unnecessary steps, and removing confusing language from critical user flows.

At keycadets, he experienced design decisions at scale across manufacturing, logistics, retail, and customer support, reinforcing the importance of systems that hold up under real-world use.

how he actually works

Ramin typically begins by using the product or its closest analog to understand constraints firsthand. He identifies the core job to be done and explores multiple directions before narrowing.

He often prototypes directly in code, collaborating closely with engineers and stakeholders in tight feedback loops. Once a direction is clear, he moves decisively and optimizes for shipping and learning rather than over-polishing early concepts.

what makes his approach different

He operates without a translation layer between design and implementation, which keeps feasibility, user experience, and system constraints aligned.

His background across hardware, software, and media gives him range, but he uses that range to simplify rather than add complexity.

forward-looking

Ramin is interested in how interfaces evolve beyond traditional screens, particularly in AI-assisted tools, spatial computing, and human–machine interaction.

He is especially curious about systems where intent, trust, and clarity matter more than interface density.

interests & ideal work

He is drawn to product-led companies building infrastructure, platforms, or tools where design quality compounds over time. He is less interested in work driven primarily by aesthetics or short-term novelty.

availability & collaboration

Ramin works as a senior individual contributor and design leader. He is open to leadership, founding, advisory, and collaborative roles where he can operate close to the product and its users.

work style & team fit

He works best on teams that value clear thinking, trust, and ownership. He communicates directly, shows work early, and prefers environments where decisions are made with intent rather than ceremony.

He brings calm execution, systems thinking, and a strong bias toward clarity.