Choose Hero/Masthead Background Video

Start by selecting and downloading a video for your website’s masthead. Pexels offers free stock photos, royalty-free images and videos.

For today’s workshop, we’ve curated two video creators to help you get started quickly.

Browse PexelsFree stock photos and videos
Pexels galleries for Google DeepMind and Tommaso Raso showing abstract video thumbnails
Workshop picks: browse either creator’s gallery and download a video that suits your masthead.
Google DeepMindBrowse the curated gallery Tommaso RasoBrowse video selections

Choosing the Style Guide

Next, visit Refero Styles and select a design.md reference for your website.

For an About Me page, start with the Editorial Typography category. Choose one design, open it, then copy and paste its URL into the prompt.

Explore Refero StylesBrowse high-quality design.md examples
Refero Styles search results for editorial typography beside an opened design detail page with its URL highlighted
Search Editorial Typography, choose a style, then copy the selected design page URL from your browser.
Open Editorial TypographyBrowse recommended design.md examples for an About Me page

Introduction to Tympanus Codrops

Codrops is a source for interactive website components, including galleries, carousels, 3D experiences, hover effects and cursor interactions.

Find an effect you like, open its article, then copy and paste the article URL into your prompt so your AI agent can integrate it into your website.

Explore CodropsFind interactive components and demos
Codrops homepage with the search box highlighted beside search results for 3D with the Playground category highlighted
Search for an interaction such as “carousel” or “3D”, then choose Playground to see code experiments and demos.
  1. Visit CodropsOpen the component library.
  2. Search an effectTry carousel, 3D, hover or cursor.
  3. Choose PlaygroundBrowse experiments with code and demos.
  4. Copy the article URLPaste the link into your AI prompt.

Choosing the Interactive Component to Integrate

For today’s workshop, everyone will integrate the Inline Menu Layout—a hover interaction that highlights your different social accounts.

Open the demo, copy its URL and include it in your Section 3 prompt.

Open Inline Menu LayoutView the social-links hover interaction
Tympanus Inline Menu Layout demo showing oversized text links with a portrait appearing over the hovered item
Workshop component: use the Inline Menu Layout to turn your social-account links into an interactive hover experience.

Alternative Suggestions

  • Your AI experimentsCreate an interactive showcase of projects you have made.
  • Animated cursor interactionBrowse cursor experiments on Codrops ↗
  • LinkedIn résuméTurn your experience and career highlights into an interactive section.
  • Recreate an inspirationShare a link to an interaction you saw on another website.