DEV Community: fanioz

Solstice Cipher: Routing Light to Crack Codes — A Puzzle Game for the June Solstice Game Jam

fanioz — Sat, 20 Jun 2026 04:48:53 +0000

This is a submission for the June Solstice Game Jam

What I Built

The June solstice is the moment the sun reaches its peak — the longest day, the shortest shadow. I wanted to build a game where you become the sun.

Solstice Cipher is an optical puzzle game where you manipulate light beams to decrypt hidden words. Each level gives you a sun emitter, a set of cipher glyphs hiding the letters of a secret word, and a briefcase full of optical tools. Your job: route the light beam through the correct sequence of glyphs to illuminate every letter and reveal the cipher.

The game progresses through 15 hand-crafted levels that track the arc of the solstice day. Early levels teach you the basics with a single mirror; by the end, you're juggling prisms that split beams, color filters that tint white light into red, green, or blue, combiners that additively blend two colored beams back together, portals that teleport light across the board, and benders that deflect beams at fixed 45° angles. Every tool snaps to 15-degree increments, turning freeform placement into a satisfying logic constraint.

The solstice connection isn't just thematic window dressing — it's the core mechanic. You literally control light, casting it through shadow to reveal hidden knowledge. The deeper you progress, the more tools you need, mirroring how the sun's journey across the sky grows more complex as the day unfolds.

You can play it right now — no downloads required:

solstice-cipher-game.vercel.app

Video Demo

Code

fanioz / solstice-cipher

Solstice Cipher

A neon-lit optical puzzle game about manipulating light beams to decrypt hidden codes.
Built for the June Solstice Game Jam

About the Game

Solstice Cipher is a sci-fi optical puzzle game where you manipulate light beams to decrypt hidden codes. You are given a grid and a briefcase full of optical tools like mirrors and beam splitters. Your goal is to route a single light emitter through the correct sequence of receiver glyphs to reveal the hidden cipher.

It features a sleek, high-contrast neon aesthetic with strict orthogonal grids, capturing the feeling of classic "laser reflecting" games with modern polish and smooth animations.

Features

Optical Puzzles: Drag and drop tools like mirrors and splitters to direct light beams around obstacles.
Contextual Learning: Learn the mechanics naturally as you play, thanks to a contextual UI tutorial system that guides you without breaking immersion.
Neon Aesthetic: A sleek, high-contrast visual…

View on GitHub

How I Built It

I didn't write a single line of GDScript by hand. Instead, I took on the role of Game Director, using Google Antigravity — a Gemini-powered autonomous coding agent — as my lead programmer and Godot engine specialist.

I chose Godot 4.6 with the GL Compatibility renderer (WebGL 2) to target both web browsers and Android. My process was entirely prompt-driven: I described architectural constraints and game mechanics in plain English, and Antigravity generated the implementation.

1. A Multi-Pass 2D Raycasting Engine

The heart of the game is a custom raycasting system built on Godot's PhysicsDirectSpaceState2D. Every time a tool is moved or rotated, the engine recalculates the entire light path from scratch:

var space_state = get_world_2d().direct_space_state

active_rays.append({
    "origin": sun.global_position,
    "direction": Vector2.RIGHT.rotated(sun.rotation),
    "color": "white",
    "bounces_left": MAX_BOUNCES,
    "exclude": [],
    "current_dist": 0.0
})

Each ray segment is cast using PhysicsRayQueryParameters2D, and when the beam hits a tool, the tool's process_beam() method returns zero, one, or two new rays depending on its type. Mirrors use Vector2.bounce() for physically accurate reflections. Prisms split a single beam into two — one straight-through and one at a right angle. The whole system runs in a propagation queue that resolves in multiple passes (up to 10) to handle combiners that need to accumulate inputs from separate beam branches before emitting their blended output:

while active_rays.size() > 0 and pass_count < 10:
    var propagation_queue = active_rays.duplicate()
    active_rays.clear()

    while propagation_queue.size() > 0:
        var ray = propagation_queue.pop_front()
        _cast_ray_segment(space_state, ray, propagation_queue)

2. Seven Optical Tools, One Unified Interface

Every tool implements a single polymorphic process_beam() method. The raycaster doesn't care what it hit — it just calls process_beam() and follows the output. This made it trivial to add new tool types without touching the core engine:

Tool	Behavior
Mirror	Reflects the beam (`Vector2.bounce()`)
Prism	Splits into straight-through + right-angle beams
Filter	Passes beam through, tinting it red/green/blue
Combiner	Collects two colored beams, additively blends RGB, emits one output
Portal	Teleports beam to a linked portal with local-space direction inversion
Bender	Deflects beam at a fixed 45° angle relative to its normal
Shade	Blocks the beam entirely

3. Color-Matched Cipher Glyphs

The real "aha!" moment in puzzle design came from coupling color to the cipher. Each glyph has a required_color property — if the beam hitting it doesn't match, it stays dark:

func set_illuminated(state: bool, hit_color: String = "white") -> void:
    if state and hit_color != required_color:
        state = false

This means later levels aren't just about routing light to the right place — you need the right color of light to arrive there. You might need to split a white beam through a prism, filter one branch to red and the other to blue, then recombine them downstream for a magenta glyph. It transforms each puzzle into a logic circuit.

4. Contextual Tutorial Without Breaking Flow

With the jam clock ticking, I couldn't afford to build scripted tutorial levels. Instead, I implemented a lightweight contextual UI system that teaches mechanics as the player discovers them:

func _on_item_dropped(tool_type: String, drop_position: Vector2, _slot_ref: Node) -> void:
    if instruction_1:
        instruction_1.hide()
    if tool_type == "mirror" and instruction_3 and not instruction_3.visible:
        instruction_3.show()
        instruction_3.position = drop_position + Vector2(-300, -80)

The instructions only appear after the player successfully performs an action. Drop your first mirror? Now the rotation hint appears — positioned right above where you dropped it. It's reactive, not prescriptive.

5. Procedural Puzzle Verification with a BFS Backwards Solver

To validate that generated puzzle layouts are actually solvable, I tasked Antigravity with building a BackwardsSolver. It uses BFS pathfinding on the grid to find routes from the light source to each glyph, then analyzes turns and intersections to determine exactly which tools (mirrors, prisms, filters) need to be placed and where. If the required tool count exceeds the tier's budget, the layout is rejected:

# Budget check
if tools.size() > get_piece_budget(tier):
    return {} # Over budget — reject and regenerate

This guarantees every procedurally generated level is mathematically solvable before the player ever sees it.

Prize Category

Best Ode to Alan Turing

Solstice Cipher is, at its core, a game about mechanical decryption.

Just as Turing's Bombe machine required operators to wire together rotors in precise configurations to complete an electrical circuit and crack Enigma, players in Solstice Cipher must wire together optical tools in precise configurations to complete a light circuit and crack a hidden word. The parallel is structural, not superficial:

Turing's rotor → the Mirror. Both redirect a signal (electrical/optical) along a new path.
The plugboard → the Filter and Combiner. Both transform the signal's properties (letter substitution / color transformation) as it passes through.
The Enigma ciphertext → the darkened glyphs. Both are meaningless until the correct circuit configuration illuminates the answer.

The game's multi-pass raycasting engine effectively makes each puzzle chamber a programmable optical computer. The player doesn't just solve puzzles — they physically program a decryption machine out of light and glass, one mirror at a time. Every valid solution is a working program; every incorrect configuration is a bug.

Best Google AI Usage

Solstice Cipher was built from the ground up using Google Antigravity, a Gemini-powered autonomous coding agent, acting as my lead programmer and Godot 4.6 specialist. My role was pure game direction — defining architecture constraints, reviewing generated code, and steering design decisions.

Antigravity co-developed every technical system in the project:

The multi-pass 2D raycasting engine with PhysicsDirectSpaceState2D, including the propagation queue and combiner resolution loop
All seven optical tool implementations with their polymorphic process_beam() interfaces
The BFS backwards solver for procedural puzzle validation with tier-based budget constraints
The contextual tutorial system with tween-driven breathing animations
The CipherUI system that connects glyph illumination signals to the win condition checker
The SaveManager, AudioManager (with SFX pooling), and TransitionManager autoloads
A complete GUT test suite validating the scaffolder's determinism and the solver's correctness

This project demonstrates Google AI not as an embedded runtime feature, but as a full-spectrum game development partner — from architecture to implementation to testing.

Discussion: What's your approach to teaching players new mechanics during a jam? Scripted tutorials, contextual hints, or something else entirely? Let me know below!

Building a Native macOS Menu Bar Widget with SwiftUI and Glassmorphism

fanioz — Sat, 06 Jun 2026 01:52:38 +0000

I recently open-sourced SysMonitor, a native macOS menu bar app for tracking system resources like CPU, RAM, Disk I/O, and Network speeds.

I built it because I was tired of the two extremes in the macOS monitoring ecosystem: tools that give you just a tiny text readout in the menu bar with no details, or massive
dashboards that look like an airplane cockpit. I wanted a clean menu bar readout that drops down into a gorgeous, translucent widget only when I need it.

Here's how I put it together using 100% Swift and SwiftUI, and the workarounds I used to make it feel truly native.

Ditching `NSPopover` for Custom Glassmorphism

When you build a menu bar app, the standard Apple way to show a dropdown is using NSPopover. It handles the positioning and the little arrow pointing to the menu bar icon
automatically.

But NSPopover has strict visual constraints. It wraps your content in a border and doesn't easily let you achieve edge-to-edge transparency or custom glassmorphism.

Instead, I opted to build a custom, borderless NSWindow backed by an NSVisualEffectView:

// Create a borderless, transparent window
window.titlebarAppearsTransparent = true
window.titleVisibility = .hidden
window.isOpaque = false
window.backgroundColor = .clear

// Add the glassmorphism backdrop
let visualEffect = NSVisualEffectView()
visualEffect.blendingMode = .behindWindow
visualEffect.material = .hudWindow
visualEffect.state = .active
visualEffect.autoresizingMask = [.width, .height]

This gave me the exact visual style I wanted—a frosted glass panel floating over the desktop—but it meant I had to manually calculate exactly where the window should appear on the
screen.

The Math Behind Menu Bar Positioning

Because I wasn't using NSPopover, the widget window had no idea where the menu bar icon was. To make it feel like a dropdown, I had to grab the coordinates of the NSStatusItem
button and position the window relative to it.

Here's the logic inside the AppDelegate:

if let button = statusItem?.button, let _ = button.window?.screen {
    // 1. Get the button's bounds and convert to global screen coordinates
    let buttonFrameInWindow = button.convert(button.bounds, to: nil)
    let buttonFrameInScreen = button.window!.convertToScreen(buttonFrameInWindow)

    let windowWidth = window.frame.width
    let windowHeight = window.frame.height

    // 2. Center the window horizontally under the button
    let xPos = buttonFrameInScreen.midX - (windowWidth / 2)

    // 3. Place it just below the menu bar
    let yPos = buttonFrameInScreen.minY - windowHeight - 5

    // 4. Update the frame
    window.setFrame(NSRect(x: xPos, y: yPos, width: windowWidth, height: windowHeight), display: true)
}

This guarantees the window snaps perfectly underneath the icon, regardless of whether the user has a notch, an external monitor, or moves the icon around in their menu bar.

Smart Battery Management & Auto-Hide

One of the biggest issues with system monitors is that polling sysctl and calculating CPU ticks in the background can actually consume a lot of CPU, draining your MacBook
battery just to tell you your battery is draining.

To fix this, SysMonitor throttles itself. When the glass widget is visible, it polls every 2 seconds for a smooth UI. But when you click away, the window listens for
windowDidResignKey, auto-hides with a quick fade-out animation, and dials the polling back to every 5 seconds.

extension AppDelegate: NSWindowDelegate {
    // Hide the widget window automatically when the user clicks elsewhere
    func windowDidResignKey(_ notification: Notification) {
    if let window = widgetWindow, window.isVisible {
            hideWidgetWindow() // Fades out and drops polling rate to 5s
    }
    }
}

The Final Result

The end result is exactly what I wanted: a fast, native tool that tells me what I need to know and then gets out of my way.

You can check out the full source code (and grab the build) over on GitHub:

fanioz / sysmonitor

SysMonitor (sysmonitor)

A native macOS system resource widget with menu bar integration and a beautiful glassmorphic UI.

SysMonitor provides an elegant, unobtrusive way to track critical macOS system metrics. It combines a persistent menu bar item for glanceable CPU and RAM usage with a highly detailed, translucent widget window for per-core stats, disk I/O, network throughput, and memory breakdown.

Features

Menu Bar Integration: Live, compact system stats right in your macOS menu bar.
Glassmorphic Widget: A beautifully designed translucent window that pops down directly from the menu bar.
Low Overhead: Self-regulates its polling interval when hidden to minimize CPU footprint.
Smart Alerts: Native macOS notifications when metrics exceed safe thresholds.

Install

To install and build SysMonitor from source, you need Xcode installed on your Mac (macOS 13 or later).

git clone https://github.com/fanioz/sysmonitor.git
cd sysmonitor
xcodebuild -scheme sysmonitor -configuration Release build
open build/Release/sysmonitor.app

Usage

Once launched, SysMonitor will appear in your…

View on GitHub

Discussion Question: When you build background utilities for macOS or Windows, how do you balance the polling frequency with battery life constraints? Do you stick to fixed
intervals or dynamically throttle based on app visibility? Let me know below!

System Restore - The Portfolio

fanioz — Tue, 27 Jan 2026 12:22:15 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I'm Rifani Arsyad, a Full Stack Developer from Indonesia 🇮🇩 coding in cross-platform application development. With this portfolio, I wanted to showcase my technical ability across Windows desktop (WinUI 3, .NET), cross-platform (Tauri, Flutter), web development (React, Laravel), and AI/LLM integration, through an interactive, gamified experience that I hope you actually enjoy exploring it.

Portfolio

How I Built It

This project was my first real attempt at using an all in Google AI tools throughout the development journey, from brainstorming to deployment, to the image cover of this post 😂

Here is my process with Google AI:

Brainstorming: I started with Gemini Chat to explore the "system restore" concept and refine the narrative flow
Initial Code: Google AI Studio helped generate early boilerplate for the Gemini API integration and React components
Refinement: I iterated on the generated code in Antigravity, adding TypeScript types, error handling, and polish
Deployment: Finally deployed to Google Cloud Run with Cloud Build handling CI/CD

Tech Stack:

Frontend: React 18, TypeScript, Vite, Tailwind CSS v4
AI: Google Gemini API via Express.js BFF
Deployment: Docker + Cloud Run + Cloud Build CI/CD

For Light Interactivity, I included three small moments to gently guide exploration:

A letter-swap puzzle to reveal the About section
Floating bubbles that respond to cursor movement
A simulated file browser for navigating projects

What I'm Most Proud Of

The combination of a visually appealing design with a functional AI assistant that actually helps users navigate the portfolio. These are all while maintaining a sense of nostalgia for the 90s.
More than any technical detail, I'm quietly proud that I actually finished and shipped this. Like many other developers, I've started plenty of side projects that never saw the light of day. This time,thanks to the structure of the challenge and the gentle guidance of Gemini, so I can pushed through to completion. It's a small thing, but for me, shipping something complete (even imperfect) feels like real progress.

Configure CrewAI with Groq: Alternative LLM Setup Guide

fanioz — Fri, 05 Dec 2025 22:11:00 +0000

I Replaced OpenAI with Groq in My CrewAI Project – Here's What Actually Happened

The Problem: OpenAI Costs Add Up

Running multiple agents inside CrewAI can produce high token usage fast. Proprietary models like GPT-4 become expensive when scaling production workloads.

The Solution: OpenAI-Compatible APIs

CrewAI supports any OpenAI-compatible API endpoint through its native LLM class. This allows you to switch to alternative providers like Groq, Moonshot (Kimi), or local models (Ollama) without rewriting agent code.

Verified Pricing Comparison (Updated Late 2025)

Provider	Model	Input / 1M tokens	Output / 1M tokens	API Base URL
Groq	Llama-3.3-70B Versatile	$0.59	$0.79	`https://api.groq.com/openai/v1`
OpenAI	GPT-5.1	$1.25	$10.00	`https://api.openai.com/v1`

Pricing sourced from Groq Model Cards and independent LLM pricing aggregators as of November–December 2025.

Cost difference example: For high-volume processing, Groq Llama-3.3-70B can be dramatically cheaper depending on usage scale.

How to Configure CrewAI with Alternative LLMs

Step 1: Environment Setup

OPENAI_API_KEY="your-api-key"
OPENAI_API_BASE="https://api.groq.com/openai/v1"
OPENAI_MODEL="llama-3.3-70b-versatile"

Step 2: Configure Custom LLM in `agents.py`

from crewai import Agent, LLM
from decouple import config
import os

class CustomAgents:
    def __init__(self):
        api_base = config("OPENAI_API_BASE", default=os.getenv("OPENAI_API_BASE", ""))
        api_key = config("OPENAI_API_KEY", default=os.getenv("OPENAI_API_KEY", ""))
        model = config("OPENAI_MODEL", default="gpt-3.5-turbo")
        if api_base and api_key:
            self.llm = LLM(
                model=model,
                api_key=api_key,
                base_url=api_base
            )
        else:
            self.llm = LLM(model="gpt-4")

Step 3: Agent Definition (No Changes Required)

def research_agent(self):
    return Agent(
        role="Senior Research Analyst",
        backstory="Expert in market analysis with 10+ years experience",
        goal="Provide comprehensive research and insights",
        verbose=True,
        llm=self.llm,
    )

Testing Your Configuration

Verify API Connectivity

python test_api.py

Supported Providers

Groq

OPENAI_API_BASE="https://api.groq.com/openai/v1"
OPENAI_MODEL="llama-3.3-70b-versatile"

Moonshot / Kimi

OPENAI_API_BASE="https://api.moonshot.cn/v1"
OPENAI_MODEL="moonshot-v1-8k"

Local Models (Ollama Example)

from langchain_ollama import OllamaLLM
self.Ollama = OllamaLLM(model="openhermes")

Performance Considerations

Speed: Groq reports ~276 tokens/sec throughput for Llama-3.3-70B Versatile under typical inference conditions.
Latency: Typical 0.5–1.5s end-to-end response for standard workloads.
Context Length: Large context support (model-card dependent, e.g. up to ~128K tokens).
Rate Limits: See Groq account dashboard for up-to-date tier limits.

Troubleshooting

Invalid API Key

Check formatting & run:

python test_api.py

Model Not Found

Verify with:

python test_api.py --list-models

Connection Timeout

Verify base URL formatting and internet connectivity.

Quality Differences

temperature=0.3  # range 0.1–0.9 recommended

When to Use Alternative LLMs

Use alternatives when

You need lower cost & high throughput
Running many agents or parallel processes
Reducing vendor lock-in is important

Use proprietary models when

You require specialized features or alignment
Your workload is small (<$20/month usage)

Complete Example Setup

test_api.py

#!/usr/bin/env python3
import requests
import os
from decouple import config

def test_api_key():
    """Test if the API key is valid"""
    api_key = config('OPENAI_API_KEY')
    api_base = config('OPENAI_API_BASE')
    model = config('OPENAI_MODEL')

    print(f"Testing API key: {api_key[:10]}...")
    print(f"API Base: {api_base}")
    print(f"Model: {model}")

    # Test the API key with a simple request
    headers = {
        'Authorization': f'Bearer {api_key}',
        'Content-Type': 'application/json'
    }

    # Make a simple API call to test authentication
    try:
        response = requests.get(f'{api_base}/models', headers=headers, timeout=10)
        print(f'Status Code: {response.status_code}')
        if response.status_code == 200:
            print('SUCCESS: API Key is VALID')
            models = response.json().get('data', [])
            print(f'Found {len(models)} available models')
            if models:
                print('First few models:', [m['id'] for m in models[:3]])
        else:
            print('ERROR: API Key is INVALID')
            print('Response:', response.text)
            return False
    except Exception as e:
        print(f'ERROR: Error testing API: {e}')
        return False

    return True

if __name__ == "__main__":
    test_api_key()

the commands

pip install crewai langchain-openai python-decouple

echo "OPENAI_API_KEY='your-key'" > .env
echo "OPENAI_API_BASE='https://api.groq.com/openai/v1'" >> .env
echo "OPENAI_MODEL='llama-3.3-70b-versatile'" >> .env

python test_api.py
python main.py

Key Takeaways

CrewAI supports OpenAI-compatible APIs directly via environment configs.
Switching providers requires no rewrite of agent logic.
Groq provides high performance and significantly lower token cost for scale workloads.
Swapping between providers is reversible by modifying .env.

DEV Community: fanioz

Solstice Cipher: Routing Light to Crack Codes — A Puzzle Game for the June Solstice Game Jam

What I Built

Video Demo

Code

fanioz / solstice-cipher

Solstice Cipher

About the Game

Features

How I Built It

1. A Multi-Pass 2D Raycasting Engine

2. Seven Optical Tools, One Unified Interface

3. Color-Matched Cipher Glyphs

4. Contextual Tutorial Without Breaking Flow

5. Procedural Puzzle Verification with a BFS Backwards Solver

Prize Category

Best Ode to Alan Turing

Best Google AI Usage

Building a Native macOS Menu Bar Widget with SwiftUI and Glassmorphism

Ditching NSPopover for Custom Glassmorphism

The Math Behind Menu Bar Positioning

Smart Battery Management & Auto-Hide

The Final Result

fanioz / sysmonitor

SysMonitor (sysmonitor)

Features

Install

Usage

System Restore - The Portfolio

About Me

Portfolio

How I Built It

What I'm Most Proud Of

Configure CrewAI with Groq: Alternative LLM Setup Guide

I Replaced OpenAI with Groq in My CrewAI Project – Here's What Actually Happened

The Problem: OpenAI Costs Add Up

The Solution: OpenAI-Compatible APIs

Verified Pricing Comparison (Updated Late 2025)

How to Configure CrewAI with Alternative LLMs

Step 1: Environment Setup

Step 2: Configure Custom LLM in agents.py

Step 3: Agent Definition (No Changes Required)

Testing Your Configuration

Verify API Connectivity

Supported Providers

Groq

Moonshot / Kimi

Local Models (Ollama Example)

Performance Considerations

Troubleshooting

Invalid API Key

Model Not Found

Connection Timeout

Quality Differences

When to Use Alternative LLMs

Complete Example Setup

Key Takeaways

Additional Resources

Ditching `NSPopover` for Custom Glassmorphism

Step 2: Configure Custom LLM in `agents.py`