Skip to content

Arcade › Savanna Hearts

Savanna Hearts

  • chat
  • relationship
  • narrative
  • casual
  • romance
  • 2d
0
Remix it Discord

0 plays

How to play

Click the game above and it runs right here in your browser. No download, no installer, no account needed. viola.johnson built it with Cinevva, so it works on a phone or a tablet too.

Discussion

Nobody has said anything about Savanna Hearts yet. Play it, then tell viola.johnson what you would add next.

Make your own game

Savanna Hearts was built by viola.johnson with the Cinevva game creator: describe the game you want in chat, watch it get built, and play it in your browser minutes later.

Remix Savanna Hearts opens the real game in the creator and forks its actual files, chat and design doc, so you start from the code rather than from a description.

Read the build brief for Savanna Hearts

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive single-screen conversational relationship game titled “Savanna Hearts.” It is a warm, stylized chat interface set over a sunset savanna landscape, with no movement-based gameplay: the core interaction is typing or selecting messages to build the bond between two lion characters, Kion and Rani.

Visual presentation: use a full-viewport app constrained to roughly 980px wide and vertically fill the screen. The background is layered CSS-style scenery: a pale golden/peach sunset sky with a bright glowing sun in the upper-right, a large muted rust-brown rounded hill across the lower-middle, and dark olive-green foreground grass along the bottom. Use a warm palette of cream, sand, orange-gold, rust, brown, and olive green. The interface sits above the scenery with soft shadows, translucent cream cards, rounded corners, and light blur/glass effects. The visual tone is cozy, romantic, and polished, with system sans-serif typography.

At the top, show the large bold white title “Savanna Hearts” with a subtle shadow, and the subtitle “A conversation between two lions.” On the upper-right show a Bond meter labeled “Bond [number]%”; begin at 58%. The meter has a translucent white track and a warm yellow-to-pale fill whose width represents the percentage. Include a small translucent “restart” button centered near the top.

Below the header, create a rounded cream scene card spanning most of the width. On the left show Kion with a circular lion face/avatar, the name “Kion,” and the role text “brave & curious.” On the right show Rani with a circular lion avatar, the name “Rani,” and “warm & watchful,” laid out mirrored/right-aligned. Place a heart symbol between them with a gentle pulsing animation. The avatars are circular with warm orange/rust decorative rings and soft inset highlights; Kion can use a lion emoji-style face and Rani can use a lion portrait/avatar image or equivalent circular lion portrait, keeping the same visual treatment. Under each character’s role, support a hidden “typing…” indicator that appears while that character is replying.

The main central area is a vertically scrollable chat transcript. Initialize it with two messages appearing with a short stagger: Kion says, “The evening wind is gentle tonight. It feels like the whole savanna is listening.” Then Rani says, “Then let’s give it something kind to hear. What’s on your mind, Kion?” Messages are rounded speech bubbles with subtle shadow and a small time/author line. Kion’s bubbles are pale translucent white and aligned left with a slightly distinct lower-left corner; Rani’s bubbles are pale yellow/cream and aligned right with a distinct lower-right corner. New bubbles should pop/fade in and the transcript should scroll to the newest message. The user is always sending as Rani, while automatic replies alternate between Kion and Rani: after the first user message Kion replies, after the next Rani replies, and so on.

At the bottom, provide a translucent cream rounded composer with a multiline textarea placeholder “Write a message to Kion or Rani…” and a rust-colored square/rounded send button containing a white arrow. Pressing Enter sends; Shift+Enter inserts a new line. Resize the textarea up to a modest maximum height as text grows. Under the composer, show horizontally scrollable quick suggestion buttons in translucent white, such as “I missed you today.”, “Tell me your secret dream.”, “Let’s watch the sunset together.”, and “You make me feel brave.” Clicking one sends it immediately. Show the hint “Press Enter to send · Shift + Enter for a new line” below the suggestions, centered in small semi-transparent white text (it may be hidden on narrow mobile layouts).

Conversation mechanics: ignore empty/whitespace-only sends. On send, add the user’s exact trimmed text as a Rani bubble, clear the input, increment the turn counter, and increase Bond by 4 if the text contains love, care, miss, together, thank, proud, dream, or hope (case-insensitive); otherwise increase Bond by 2. Clamp Bond between 0 and 100 and update both its number and fill width. Then show the currently replying character’s “typing…” indicator for about 850ms, add one context-sensitive reply, and increase Bond by 1 more after the reply arrives. Rotate through replies using the turn counter.

Classify the user message by keyword, choosing the first matching category in this order: love if it contains love/care/miss/heart/together/brave/special/beautiful/trust; dream if it contains dream/hope/future/wish/want to be; adventure if it contains adventure/explore/journey/go to/find/trail; sad if it contains sad/afraid/scared/bad day/lonely/hurt/sorry; kind if it contains thank/kind/good/proud/smile/happy; otherwise default. Use these reply pools:
- love: “I feel it too — quiet as moonlight, but impossible to miss.” / “Then stay with me a little longer. I like the world better when you’re near.” / “You are my favorite part of every horizon.”
- dream: “I dream of a place where every young lion has someone to guide them.” / “My dream is simple: a quiet ridge, a wide sky, and you beside me.” / “I want to leave every part of the Pride Lands better than I found it.”
- adventure: “A new trail? I’m listening. Lead the way and I’ll watch our backs.” / “There’s a hidden waterhole beyond the red cliffs. We could find it together.” / “The best adventures are the ones we can tell stories about later.”
- sad: “Come closer. You don’t have to carry that feeling alone.” / “Even strong lions need a safe place to rest. I’m here.” / “The stars are still above us. We’ll find our way through this.”
- kind: “That warms my heart more than the midday sun.” / “I’ll remember that when the night feels long.” / “You always know how to make my paws feel steady.”
- default: “Tell me more. I want to understand the world the way you see it.” / “That sounds important. I’m right here with you.” / “Hmm… I never thought of it that way. Keep going.”
Select the response by cycling through the chosen category’s three entries according to the turn counter.

The restart button must clear the transcript, reset Bond to 58 and turn to zero, replay the two starter messages with their staggered timing, and refresh the suggestions. Rotate the displayed suggestion order after each turn while retaining the four provided phrases. Ensure the layout adapts to mobile: narrower meter, smaller avatars and bubbles, and a compact scene card while preserving the chat and composer interaction. Store/retrieve game state at least for Bond, turn, and visible messages if the host environment supports it.

More free browser games

Browse the whole Arcade →