Onomanabi

• 

  ワクワク (excited) bounces. ソワソワ (restless) shifts from side to side.

• 

  Tap a related word on the usage map to open a comparison within the same entry.

• 

  A Japanese example with reading aids, an English translation, and a usage note for ソワソワ.

• 

  After choosing ひりひり (Persistent burning / stinging), see how it differs from ちくんっ (Single needle-like prick).

• 

  1,500+ words across six levels, from everyday expressions to literary language.

• 

  Onomanabi app icon, 1024 × 1024.

• 

  Mobile app screenshot, 1179 × 2556, without a device frame.

Inspiration

I had always known Japanese was rich in onomatopoeia. What struck me was that this richness isn't universal, and that Japanese speakers can create new expressions in everyday conversation. Doing that takes a feel for how these words work.

I wondered how to share that feeling with non-native speakers. The nuances can be hard to explain even in Japanese. I thought movement and color might help convey what words alone couldn't. I wanted to go beyond what a paper dictionary can show and make learning these expressions fun.

What it does

Onomanabi is a Japanese onomatopoeia learning app for iPhone and Android, with a web version too. It has 1,500+ words across six levels.

Look up a word and watch it move. Read the example, then tap a related word on the usage map. A comparison opens below it. Quizzes help you practice choosing between words, while lessons and spaced-repetition review bring you back to what you've learned.

The first two levels and usage maps are free, with no account required. A one-time Premium purchase unlocks Levels 3–6, word comparisons, and comparison quizzes. Learning content is available offline on mobile.

How I built it

The mobile app uses React Native and Expo. Reanimated moves the Japanese text, and Skia adds selected visual effects. The web version uses Next.js.

RevenueCat handles the mobile Premium purchase. Learners can buy as guests and link their purchase to an account later.

The design challenge

An animation can be expressive and still be hard to read. I kept the Japanese letters large and brightened colors that were too dark against the background. もちもち compresses and springs back; ぐるぐる rotates. The movement needs to leave the word recognizable.

Some differences need more than motion. ソワソワ can come from eagerness as well as worry, so examples matter. I put comparisons directly below the usage map to keep that context on the page. The map uses different axes for different subjects, such as softness for mouthfeel and positive or negative feeling for emotion.

Built With

• cloudflare-d1
• cloudflare-workers
• expo.io
• next.js
• react-native
• react-native-reanimated
• react-native-skia
• revenuecat
• typescript