Announcing: AI Web Artifacts

Announcements
21

I tried locally, and most of the issues encountered:

  • In fullscreen, sometimes the escape bar overlaps the content, making it impossible to interact with it.
  • Sometimes, “Run Artifacts” doesn’t appear immediately, but it does once you hover over the post icons for example (it seems)
  • I had only one instance when no result was displayed. I could see the indicator, and then nothing happened.

Overall, it works very well. :+1:

Here are some of the demos.
It’s not that easy to get a demo right. As usual, the more detailed a prompt, the better.
Sometimes, extra precision is needed. It doesn’t always include all resources, is not responsive, or requires code to wait for page load. Also, using external libraries raises the chance of failure.

I enjoyed way too much this feature. :smile:

Prompt (simulate projectile motion)

Create a page to simulate projectile motion. The page should:

  1. Allow users to input initial velocity, angle, and height of the projectile.
  2. Display a live animation of the projectile’s trajectory.
  3. Include calculated values for time of flight, maximum height, and range.
  4. Use sliders for real-time adjustment of input parameters.
  5. Include a “Reset” button to start over.
Video

Prompt (Emoji raining game)

Create a page where users pick their mood, and emojis start raining down the screen. The page should:

  1. Provide mood options like “Happy,” “Grumpy,” or “Pizza.”
  2. Make emojis like :smile:, :angry:, or :pizza: fall endlessly from the top of the screen.
  3. Allow users to click emojis to “collect” them with a funny sound effect.
  4. Include a silly counter like “Pizza Slices Collected: 27.”
  5. Use HTML, CSS, and JavaScript for animated fun.
Video

Prompt (Simple solar system visualizer)

Create a page visualize the solar system. The page should:

  1. Display a scaled-down, animated, detailed solar system showing planetary orbits.
  2. Allow users to click on a planet to view information such as size, distance from the sun, and orbital period.
  3. Allow users to zoom in and out.
  4. Include a slider to speed up or slow down orbital motion.
  5. Use HTML, CSS, and JavaScript for interactivity and animation.
  6. Make sure the container uses 100% width and height
Video

Prompt (CSS Animation playground)

Create a page where users can experiment with CSS animations and transitions. The page should:

  1. Display various elements (e.g., buttons, divs) that users can animate with CSS.
  2. Allow users to choose from a list of animation properties (e.g., transform, opacity, translate, rotate).
  3. Provide sliders to adjust the duration, timing function, and delay of animations.
  4. Let users preview the animations in real-time and see how changes affect the animation.
  5. Use JavaScript to update CSS properties dynamically and HTML/CSS for styling.
Video

Prompt (Interactive Data Dashboard)

Create a page that visualizes a data dashboard with interactive charts. The page should:

  1. Display multiple charts, such as a bar chart, line graph, and pie chart, each representing different datasets (e.g., sales, population, weather data).
  2. Allow users to filter the data by time range, category, or location using dropdown menus or sliders.
  3. Update the charts in real-time as users interact with the filters.
  4. Show descriptive statistics (e.g., mean, median, mode) for the selected data.
  5. Use Chart.js or D3.js for rendering charts and JavaScript to handle data filtering and statistical calculations.
Video

3 Likes