Tool

Shy Type

A little type experiment where the letters are afraid of your cursor. Move near the story and watch it quietly make room for you.

The pointer

Every letter measures how close your cursor is. The closer it gets, the more that letter wants to move away.

The push

That distance becomes a tiny directional force, so the response feels local: nearby type scatters while the rest stays readable.

The return

A gentle spring always pulls each character back to where it began. Leave the page alone and the paragraph gathers itself again.

The Unsettled Times
Vol. 01, No. 01

Fright Type

An experiment in
nervous reading

A small field report on language under pressure.

Move gently. The text is easily startled.Cursor proximity edition

Some words prefer a little distance. They arrange themselves neatly when nobody is looking, standing shoulder to shoulder like they have somewhere important to be. But bring a hand too close and the alphabet remembers it has feet. A modest nudge becomes a small evacuation; a sentence leans, loosens, forgets its posture. Nothing is broken. The letters are simply making room for the possibility of you. Keep still for a moment. Watch how quickly a paragraph gathers its nerve and returns to its old shape. Read it again, if you can.

© A very responsive newspaperHover to unsettle

Tip: turn on the force field to see the 155px detection radius and every letter currently responding to your cursor.

Inside the loop

What animate() is doing

This function runs once per screen refresh. It is a useful little blueprint for interactive motion: read the state, calculate a force, update position, draw the result, then ask the browser to do it again.

// 1. Measure the cursor's influence on this letter
if (pointer.active && distance < 155) {
  const force = Math.pow(1 - distance / 155, 1.9) * 4.5;
  pushX = dx / distance * force;
  pushY = dy / distance * force;
}

// 2. Add the push, then pull the letter back home
letter.vx = (letter.vx + pushX - letter.x * .105) * .77;
letter.vy = (letter.vy + pushY - letter.y * .105) * .77;
letter.el.style.transform = `translate(${letter.x}px, ${letter.y}px)`;

requestAnimationFrame(animate); // 3. Repeat on the next frame

Input

Pointer position and each letter’s current state.

Force

A nearby pointer creates an outward push.

Motion

Velocity keeps it fluid; damping prevents wobble.

Loop

The browser schedules the next frame at the right time.