A novel (or just weird) interface for projects

This post is a work in progress, it could change after publication. Todo: Write intro about organizing and presenting projects when you dont really have a proper plan.

Me: Create a surreal forest scene

Copilot: Here’s your surreal forest scene: towering trees under a dreamy, otherworldly sky with two moons, and giant mushrooms glowing in contrasting colors.

Me: Could we use this image as a background. perhaps with an interesting way to present different projects on top in a playful way?

Copilot:

Yes, that image would make a fantastic background for a creative blog! Here’s a concept for how you could use it:

Design Idea

• Background: Use the surreal forest image as a full-screen background with a subtle dark overlay (e.g., 30–40% opacity) to make text readable.
• Layout:
  • Floating Cards: Place project previews in playful, irregular shapes (like mushrooms, leaves, or glowing orbs) that “float” over the forest scene.
  • Hover Effects: When hovering over a project card, it could expand slightly and glow softly, matching the surreal vibe.
• Typography:
  • Use a whimsical serif or handwritten-style font for titles.
  • Keep body text clean and readable (sans-serif).
• Navigation:
  • A transparent sidebar or top bar with minimal icons (maybe glowing like fireflies).
• Interactive Elements:
  • Add subtle animations like drifting mist or slow-moving moons in the background.
  • Projects could “grow” like mushrooms when clicked.

Would you like me to:

✅ Mock up a visual concept for this layout?
✅ Generate CSS/HTML code for the background and floating cards?
✅ Or create additional surreal elements (like glowing animals or floating islands) to enhance the background?

Which direction sounds best for you?

Me: I like how you think. Lets create a mock up visual

Copilot:

Here’s a mock-up concept for your blog homepage using the surreal forest background.

Features in the Design

Visual Hierarchy: Larger elements for main categories, smaller ones for secondary links.

Playful Navigation: Each project category (Blog, Illustration, Photo, Tutorials, Apps) is represented as organic shapes (mushrooms, leaves, or rounded bubbles) floating over the forest.

Typography: Clean, readable font for titles, with a whimsical vibe.

Center Branding: Your blog name kladd.pappmaskin.no is placed prominently at the bottom.

Nope, thats pretty bad 🙂

Me: Could we create more mockups that takes it in a different direction? What about fireflies living their best life in the landscape in the image, flying around, perhaps landing on the mushrooms occationally. But if the user hovers over the image they should sort of gather in a central pattern, then freeze in place. perhaps with thin glowing lines between them, like the abstract mapping of the neurons in a brain? Perhaps slight larger fireflies then (like they came closer). when the user hovers over a firefly it should show a more normal and informative text, perhaps with a featured image.

Copilot:

Mockup Concept: Firefly Network

Background: Keep the surreal forest image as the base layer.

Fireflies:

• Idle State:
  • Fireflies scattered randomly across the scene, glowing softly in warm tones (yellow, orange, maybe some teal for contrast).
  • Occasional subtle animations: slow drifting, flickering glow, and some landing on mushrooms for extra charm.
• Hover Over Background:
  • Fireflies animate toward the center, forming an abstract neural-network-like pattern.
  • Thin glowing lines connect them, creating a web-like structure (think brain synapses or constellations).
  • Fireflies slightly enlarge and glow brighter, giving the illusion they’ve “come closer.”
• Hover Over Individual Firefly:
  • A tooltip or card appears with:
    • Project Title
    • Short Description
    • Featured Image
    • Maybe a “View More” button.
  • The firefly could pulse or glow stronger while active.

Typography & UI:

• Keep text minimal until interaction—this makes the scene feel magical and uncluttered.
• Use elegant, slightly whimsical fonts for titles.

Extra Flair:

Optional: subtle sound effects (soft chimes when fireflies gather).

Add faint animated mist or drifting particles in the background.

(copilot refused to create more answers, switched to Claude)

Me: I have this idea of using this image as a fullscreen web interface to different unfinished projects Im working on. My idea is to have each idea (representing individual wordpress posts) be a glowing animated firefly that flies in random paths over the image, and perhaps even lands on the mushrooms or paths. When the user clicks the image the should form up a menu of some kind. Open to suggestions on how that menu should look. Might need to think about accessibility and viewing on small devices from the start.

Claude:

Key Features:

• Organic Movement: Fireflies drift naturally with smooth, randomized paths
• Pulsing Glow: Each firefly has an animated glow effect that pulses in intensity
• Hover Tooltips: Shows project title when you hover over a firefly
• Accessible Menu: Clean overlay with project details, status badges, and descriptions
• Mobile-Friendly: Responsive design that works on small screens

Accessibility Considerations:

• Keyboard accessible (ESC to close menu)
• Clear visual hierarchy in the menu
• High contrast text on dark backgrounds
• Touch-friendly targets for mobile
• Screen reader friendly labels

Next Steps to Consider:

1. WordPress Integration: Replace the sample projects array with actual WordPress API calls
2. Landing Behavior: Add logic for fireflies to occasionally “land” on mushrooms/paths (would need coordinates)
3. Performance: For many projects, consider using canvas instead of DOM elements
4. Sound: Optional subtle ambient sounds when hovering/clicking fireflies
5. Categories: Different colored fireflies for different project types

Would you like me to add any specific features, like landing animations, WordPress integration, or different menu styles?

First running version:

It took claude a few tries to get the static version working. A notable problem was that it couldnt load the image in its gui, due to cross platform issues, so I ended up asking Claude to generate html so I could test it locally. Took that code and created a codepen:

See the Pen Firefly interface v1 by Morten Skogly (@mskogly) on CodePen.

Next steps?

Me: Lets tweak it a little. The menu that comes up is ok, but perhaps we could try another variant? not sure what. do you have any suggestions?

Claude:
For the menu, here are a few alternative concepts that could work well with the mystical forest theme:

Option 1: Radial Menu – When you click, fireflies gather in a circle around your cursor, each representing a project. Hover over one to see details.

Option 2: Floating Cards – Projects appear as floating, glowing cards that drift gently in 3D space, maintaining the ethereal feel.

Option 3: Tree Branch Menu – A stylized tree branch grows from where you click, with projects as glowing leaves/orbs along the branches.

Option 4: Bottom Drawer – A sleek drawer slides up from the bottom with a frosted glass effect, showing projects in a horizontal scrollable layout.

Option 5: Spiral Gallery – Projects arrange in a spiral pattern with the most recent in the center, zooming in when selected.

Option 6: Minimalist Side Panel – A narrow side panel slides in from the left/right with just project titles, expanding to show details on hover.

My personal recommendation would be Option 4 (Bottom Drawer) or Option 2 (Floating Cards) – they maintain the magical atmosphere while being mobile-friendly and accessible.

Which direction appeals to you? Or would you like me to mock up one of these so you can see it in action?

–
And then I ran out of free juice on Claude, just as I was about to ask for mushrooms popping up on the foreground 🙂

Working with Gemini to make the data dynamic

Lets see if we can replace the static content with data pulled from my wordpress. I pasted the code from codepen into Gemini, and got a very good summary of the code. https://gemini.google.com/share/c5c36480cb3d

Me: The plan is to have each firefly represent a separate wordpress post hosted on my site kladd.pappmaskin.no. Perhaps that could be a real source of data?

Gemini: Here is the complete, updated code. I’ve introduced a new state variable for the projects and restructured the useEffect logic to handle data fetching and subsequent firefly initialization.

(I also asked Gemini to include wordpress categories)

See the Pen Firefly interface v2 (with data from wordpress api) by Morten Skogly (@mskogly) on CodePen.

I still feel that the menu is pretty ugly, so I spent some time working with different AI to test different ideas. I’ll spare you the resulting code, suffice to say the solutions (from Gemini in this case) fell into a well known problem with vibecoding: After too many iterations things just start to fall appart. Fixing one bug introduces another, or the ai simply starts fresh and wipes everything, introducing features I have never requested.

I did finally get a menu that looked nice visually, but didnt work technically:

See the Pen Firefly interface v5 (Chatgpt fixes Gemini) by Morten Skogly (@mskogly) on CodePen.

So whats next?

Me: Decided to try a bit more. But reverting to the earlier example where at least the menu is working. I provided ChatGPT with a screenshot to show what i wanted.

So, this is a perfect illustration of how frustrating it can be to work with ai. ChatGPT gave me this: It replaced my background, changed the fireflies to static, and changed the logics for opening the menu completely. Why?

See the Pen Firefly interface fork of v3, new menu attempt by chatgpt (with data from wordpress api incl categories) by Morten Skogly (@mskogly) on CodePen.

Sigh.





For later:
I also came across this on codepen:
https://codepen.io/filipz/pen/EaVNXmb

the visual style is a bit more futuristic than what I’m feeling, but lets give it a try.

(This post is a “KLADD”, the Norwegian word for draft. To be continued)