Feature Idea: Delayed/Cascading Metadata Reveal for Enhanced Photo Viewing Experience

[microsoftShannon]

Summary

A timed metadata reveal feature that creates a more elegant photo viewing experience by hiding UI elements initially, then gradually revealing them as the display time progresses.

The Problem

When displaying photos as art (galleries, digital frames, museums), metadata shown from the start can distract from initial appreciation of the photograph. Viewers benefit from seeing the pure image first, then learning technical details later.

The Proposed Experience

Timeline example (for 10-minute display):

• Minutes 0-4: Pure photograph (no UI distractions)
• Minute 4: Weather fades in (context for distant family)
• Minute 5: Clock fades in (time awareness)
• Minute 7: Photo metadata fades in (camera, EXIF, location)
• Minute 10: Next photo (everything resets and hides)

This creates:

• ✨ Surprise & delight when metadata appears
• 🎨 Unobstructed viewing for most of the duration
• ⏰ Visual signal that photo is about to change

Proven Implementation (Custom CSS)

This works TODAY using the existing custom CSS feature:

custom.css:

/* TIMING CONTROLS - Easily adjustable */

/* Photo metadata - appears after 7 minutes */
.asset-metadata-container {
    opacity: 0;
    animation: fadeInMetadata 2s ease-in-out 420s forwards;
}

/* Weather - appears after 4 minutes */
#weather-container {
    opacity: 0;
    animation: fadeInWeather 2s ease-in-out 240s forwards;
}

/* Clock - appears after 5 minutes */
#clock {
    opacity: 0;
    animation: fadeInClock 2s ease-in-out 300s forwards;
}

/* Fade animations */
@keyframes fadeInMetadata {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInClock {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInWeather {
    from { opacity: 0; }
    to { opacity: 1; }
}

docker-compose.yaml:

volumes:
  - ./config:/config
  - ./custom.css:/custom.css:ro

Tested on: Kiosk v0.32.1

Feature Request: Built-in Support?

While the CSS solution works perfectly, this could be valuable as a native feature:

Proposed config.yaml:

ui_timing:
  clock_delay: 300        # Show after 5 minutes (seconds)
  weather_delay: 240      # Show after 4 minutes
  metadata_delay: 420     # Show after 7 minutes
  fade_duration: 2        # Fade transition length

Benefits of native implementation:

• Easier for non-technical users
• Documented and officially supported
• URL parameter override support
• Syncs with duration setting automatically

URL override example:

http://kiosk?metadata_delay=300

Use Cases

• Museums/galleries: Let visitors appreciate artwork before seeing technical details
• Digital photo frames: Family photos feel more personal without constant metadata
• Event displays: Conference/wedding slideshows that don't feel "technical"
• Waiting rooms: Professional presentation without distraction

Discussion

Questions for the community:

1. Should this be built-in, or keep as custom CSS recipe?

   • Pro built-in: More accessible, officially supported
   • Pro custom CSS: Keeps core focused, already works

2. Default timing suggestions?

   • I use 4min/5min/7min for 10min photos
   • What ratios work for shorter/longer durations?

3. Should timing be absolute (seconds) or relative (% of duration)?

   • Absolute: Consistent experience
   • Relative: Scales with duration setting automatically

4. Additional elements to control?

   • Progress bar?
   • Navigation hints?
   • Album name?

Alternative: Documentation Enhancement

If built-in support isn't the right fit, this could be added to the Custom CSS documentation as an "Advanced Example" to help others implement it.

---

Thoughts? I'm happy to contribute this however is most valuable for the project!

[damongolding]

As this idea was (in my option) written by AI, I have to ask. @microsoftShannon are you a bot?

[microsoftShannon]

No, I am not. I do however use agents to collate all of my findings into complete posts so that they can be searched in the future.