Column Bloom

Heroes

About

An animated hero section with a stepped skyline of glowing orange columns and scattered keywords around a central product wordmark, for app landing pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Column Bloom to your project and fits it to your theme.

Code

How Column Bloom is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import ColumnBloom from "@/components/ui/column-bloom";

// Three fictional partner marks, drawn for this demo.
const Spark = () => (
  <svg viewBox="0 0 32 32" fill="currentColor">
    <path d="M16 2l2.1 9.2L26 6l-5.2 7.9L30 16l-9.2 2.1L26 26l-7.9-5.2L16 30l-2.1-9.2L6 26l5.2-7.9L2 16l9.2-2.1L6 6l7.9 5.2Z" />
  </svg>
);
const Knot = () => (
  <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2.2">
    <circle cx="12" cy="12" r="7" />
    <circle cx="20" cy="12" r="7" />
    <circle cx="16" cy="19.5" r="7" />
  </svg>
);
const Prism = () => (
  <svg
    viewBox="0 0 32 32"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinejoin="round"
  >
    <path d="M16 3 27 9.5v13L16 29 5 22.5v-13Z" />
    <path d="M16 3v26M5 9.5l22 13M27 9.5l-22 13" />
  </svg>
);

const WORDS = [
  "Capture",
  "Outline",
  "Draft",
  "Daily notes",
  "Backlinks",
  "Tags",
  "Revise",
  "One place",
  "Templates",
  "Citations",
  "Focus",
  "Search",
  "History",
  "Versions",
  "Sync",
  "Publish",
  "Offline",
  "Comments",
  "Export",
  "Share",
];

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full">
      <ColumnBloom
        wordmark="qalam"
        keywords={WORDS}
        partners={[
          { name: "Inkwell", mark: <Spark /> },
          { name: "Folio", mark: <Knot /> },
          { name: "Prism", mark: <Prism /> },
        ]}
        label="Qalam: everything you write, in one place"
        theme="light"
        className="w-full"
      />
    </div>
  );
}