Skip to main content
šŸŒ Public

Share visualization

Send this visualization to others.

Piano App

Public visualization

Viewing a saved revision (read-only)

895713253b2348c9b4b2b27be47f00f7

Piano App

0 stars4šŸŒ Public
NNita
Last edited Feb 27, 2025
Created on Feb 24, 2025
Forked from Sunset App

An interactive virtual piano with white and black keys generates musical tones through the Web Audio API, allowing play via mouse, touch, or keyboard. The instrument displays a realistic 3D design using CSS gradients and shadows, with visual feedback through CSS transitions on key presses. A built-in demo melody button triggers a pre-programmed scale. The implementation dynamically creates piano keys through DOM manipulation and uses Web Audio API for audio synthesis with gain control, demonstrating front-end techniques for responsive instrument interfaces.

AI-generated description

Sunset Visualization

This visualization creates a beautiful, interactive sunset scene with several dynamic elements:

Features

  • Animated sunset that changes colors based on time of day
  • Interactive time slider to control the sun's position and scene colors
  • Gently moving boat on water
  • Flying birds that traverse the sky
  • Floating clouds that slowly drift across the horizon
  • Palm tree silhouettes on a distant island
  • Water reflections that change based on the sun's position

Technical Implementation

The visualization demonstrates:

  • CSS gradients and animations for natural-looking sky and water effects
  • JavaScript-controlled animations for birds, clouds, and boat
  • Interactive controls with real-time visual updates
  • Dynamic color transitions based on time of day
  • CSS silhouettes for creating landscape elements
  • Parallax-like depth with multiple moving elements
  • Sine wave animations for natural movement patterns

The scene creates a peaceful, ambient experience while demonstrating various front-end techniques for creating dynamic visualizations.