Skip to content

heading-styles.md

Latest commit

 

History

History
72 lines (62 loc) · 3.4 KB

heading-styles.md

File metadata and controls

72 lines (62 loc) · 3.4 KB
Raw

Addendum: Heading Block (25 Styles) Since headings are the "loudest" part of your funky design system, these 25 styles move beyond basic hierarchy into kinetic and structural art. Category A: Kinetic & Animated (The "Living" Headings)

  1. Style 01 (Infinite Marquee): Heading text scrolls horizontally across the screen like a news ticker.
  2. Style 02 (The Reveal): Text is hidden behind a color block that slides away on scroll.
  3. Style 03 (Jitter-Type): A subtle, vibrating animation—perfect for high-energy Events.
  4. Style 04 (Hover-Swap): The font-weight or font-style (e.g., Italics) morphs when the mouse passes over. 5. Style 05 (Wavy Text): Characters sit on an animated sine wave path. 6. Style 06 (Elastic Bounce): Letters bounce individually when the page loads.

Category B: Depth & Dimension (The "3D" Headings)

  1. Style 07 (Hard Shadow): Retro 90s look with a long, un-blurred "block" shadow in a contrasting neon color.
  2. Style 08 (Anaglyph): Red and Cyan "3D glasses" offset effect for a glitchy vibe.
  3. Style 09 (Layered Outline): Three layers of the same text stacked with slight offsets in different weights.
  4. Style 10 (Neumorphic): Text that looks like it's pressed into or extruded from the background.
  5. Style 11 (Glass-Cut): Text is transparent with a thick "frosted glass" border.
  6. Style 12 (Chrome/Liquid): A high-shine, metallic gradient finish for a Y2K aesthetic.

Category C: Brutalist & Destructured (The "Wild" Headings)

  1. Style 13 (The Overlap): Letters are tightly tracked so they physically touch and overlap.
  2. Style 14 (Vertical Stack): Characters are stacked one on top of the other (Japanese style) for narrow sidebars.
  3. Style 15 (Mixed Weights): Every word in the heading is a different font or weight (e.g., Serif + Sans + Script).
  4. Style 16 (Struck-Through): A thick, bold line cuts through the center of the heading.
  5. Style 17 (Background Clip Video): Heading text acts as a mask, playing a video inside the letters. 6. Style 18 (Censored): Heading starts as a black bar and "un-redacts" on click.

Category D: Narrative & Contextual (The "Functional" Headings)

  1. Style 19 (The Sub-Label): Tiny "all-caps" label sitting directly on top of the main heading.
  2. Style 20 (Numbered Lead): Large, semi-transparent background number (e.g., 01, 02) sitting behind the text.
  3. Style 21 (Underline Dash): A dashed underline that "draws" itself as you scroll.
  4. Style 22 (Bracketed): The heading is automatically wrapped in dynamic, oversized brackets [ Heading ].
  5. Style 23 (The Stamp): Text is tilted at a 15-degree angle and sits inside a rough-edged "rubber stamp" border.
  6. Style 24 (Highlighted Box): Each word has its own individual background color block.
  7. Style 25 (Floating Icon): An icon related to the Post Type (e.g., a mic for Podcasts) floats and follows the heading.

Strategic Explainer: Where to Deploy

  • Portfolio/Videos: Use Style 17 (Video Mask) or Style 12 (Chrome) to lean into high-production visuals.
  • Podcasts/Quotes: Use Style 15 (Mixed Weights) to emphasize the "voice" and personality of the speaker.
  • FAQs/Pages: Use Style 19 (Sub-Label) or Style 21 (Underline Dash) for clarity and structure without losing the "funky" edge.
  • Events: Use Style 01 (Marquee) for dates and locations to create a sense of urgency and motion.

Would you like the technical properties for the Divider / Separator (10 styles) next to define how these sections are split?