YASHWANTH REDDY K

Posted on Apr 24

I built a Cyber-Cipher Text Decoder on Vibe Code Arena

#ai #hackerearth #vibecodearena #llm

There’s a version of this app that’s technically correct.

You type text.
Click a button.
It returns encrypted output.

Done.

And yet… it feels completely lifeless.

Because nothing happened.

The system skipped the most important part:

the transition between meaning and noise

The part everyone rushes past

Encryption is usually treated like a function.

function caesar(str, shift) {
  return str.replace(/[a-z]/gi, c =>
    String.fromCharCode(c.charCodeAt(0) + shift)
  );
}

Input → output.

Clean. Fast. Predictable.

And completely uninteresting.

Because in a “cyber terminal” fantasy, encryption isn’t a jump.

It’s a process you witness.

The illusion you’re actually building

What you want is not:

“text becomes encrypted”

It’s:

“text loses meaning… before gaining a new one”

That in-between state — the flicker — is where the entire experience lives.

Without it, this is just a textarea with math.

Where most implementations fall apart

They try something like:

el.textContent = encrypt(input);

Then maybe wrap it in a timeout.

Maybe sprinkle some randomness.

But it still feels fake.

Because all characters update at once.

No tension. No progression.

The trick is not randomness

It’s controlled chaos

Each character needs its own timeline.

Not just a delay — a lifecycle.

Something like:

setTimeout(() => {
  el[i] = randomSymbol();
}, i * 30);

Now things start to stagger.

But it’s still not enough.

Because flicker isn’t just delay.

It’s instability.

The version that actually feels right

Instead of swapping once, you let each character struggle before settling.

function flickerChar(finalChar, duration = 1000) {
  const chars = "@#$%*&!";
  const start = Date.now();

  return new Promise(resolve => {
    const interval = setInterval(() => {
      const now = Date.now();

      if (now - start > duration) {
        clearInterval(interval);
        resolve(finalChar);
      } else {
        resolve(chars[Math.floor(Math.random() * chars.length)]);
      }
    }, 50);
  });
}

It’s not just animation.

It’s simulation of instability.

And now something subtle happens

The encryption function stops being the star.

The transition system becomes the real feature.

Because users don’t remember:

what the output was

They remember:

how it became the output

The UI starts behaving like a terminal

Now the aesthetic matters more than usual.

Not because it looks cool.

Because it reinforces the illusion.

The moment you switch to:

green-on-black
glowing text
scanlines

You’re no longer building a UI.

You’re building a fiction the user agrees to believe

Even something as simple as:

body {
  background: black;
  color: #00ff9f;
  text-shadow: 0 0 8px #00ff9f;
}

Does more than styling.

It sets expectations.

The glitch toggle is where things get interesting

At first, it feels like a gimmick.

Shake the text. Add some jitter.

But it reveals something deeper.

Because now the system has two states:

stable
unstable

And your UI needs to reflect that continuously

Not just during animation.

A tiny class toggle:

document.body.classList.toggle("glitch");

Ends up changing the entire mood of the app.

Copy-to-clipboard sounds trivial

It isn’t

Because this is the only moment where:

the illusion meets reality

You’re taking something from the “terminal”…

And moving it into the real world.

That’s why even a small feedback like:

navigator.clipboard.writeText(output);

paired with a toast matters disproportionately.

Without it, the system feels incomplete.

What shows up in Vibe Code Arena

This challenge creates a very specific divide.

Not in correctness.

In experience.

One model will:

implement encryption correctly
add some flicker
style it decently

It works.

But feels like effects layered on top of logic.

Another model leans into the transition itself:

staggered character timelines
independent flicker cycles
UI reacting per-character

Now the system feels alive.

Not because of complexity.

Because of temporal detail

The part that’s easy to miss

This isn’t about encryption.

It’s about progressive transformation

The same pattern shows up in:

loading states
skeleton screens
streaming UIs
code editors

Anywhere the system reveals itself over time.

The shift

After building this, you stop seeing:

“text gets encrypted”

And start seeing:

“state transitions can be felt, not just observed”

And that changes how you think about UI entirely.

If you want to push this further

Try breaking your own implementation.

What happens with long text?
Do all characters resolve cleanly?
Does glitch mode interfere with flicker timing?
Does the system feel consistent every time?

That’s where the real challenge is hiding.

And if you want to see how different approaches handle that tension between logic and illusion, this is the exact arena where it plays out:

👉 https://vibecodearena.ai/share/c8238364-3d2a-4bba-b14c-70146bbe0864

Not to “solve” it.

But to see how far you can push the transformation before it breaks.

DEV Community