HomeAI & Machine LearningRotary Position Embeddings (RoPE)

Rotary Position Embeddings (RoPE)

Interactive 3D visualization of Rotary Position Embedding (RoPE): watch query and key vectors spin around a token sequence and see why the attention score between two tokens depends only on their relative distance, not their absolute position.

AI & Machine Learning3DAdvanced60 FPS📱 Mobile-adapted
transformer-architecture ↗ Open standalone

Modern transformer language models like LLaMA and Mistral don't add a positional signal to their embeddings — they rotate query and key vectors by an angle proportional to token position. This simulator renders every token in a sequence as a spoke spinning in its own 2D plane, lets you pick a query token and a key token to compare, and shows the resulting attention dot product live. Because rotating two vectors by mθ and nθ leaves their dot product dependent only on (m−n)θ, sliding the whole sequence window forward with the shift control leaves the highlighted score untouched even as both absolute angles keep advancing — the exact relative-position invariance that lets RoPE-based models extrapolate to context lengths they never trained on.

⚙ Under the hood

Watch query and key vectors rotate around a sequence of tokens under Rotary Position Embedding (RoPE): each token's vector spins by an angle proportional to its position, and the attention dot product between any two tokens depends only on their relative distance -- not their absolute position in the sequence.

transformersattentionropepositional-encodingnlpllm

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)