brand/mark.ex

Mark

The EmpoweredHouse mark, alone or as the lockup with the wordmark, drawing itself in.

Use it

# in the module that renders the template
use EHVisuals

<div class="h-96 rounded-xl border border-border">
  <.brand_mark animated />
</div>

default

mark alone

no tagline · replays in view

mark alone · hover · custom tagline

light surface

isometric · still

Props

Prop	Type	Default	What it does
`wordmark`	boolean	`true`	Shows the lockup. When false the mark stands alone.
`tagline`	any	`"Software shaped to your company"`	The mono line underneath. `nil` hides it.

Frame props, shared by every composition

Prop	Type	Default	What it does
`animated`	boolean	`false`	Turns motion on. Without it the composition renders in its final, still state.
`trigger`	"mount" \| "in-view" \| "in-view-repeat"	`"in-view"`	When the entrance plays: on page load, once when scrolled into view, or every time it comes back into view.
`hover`	boolean	`false`	Enables the hover micro-interactions the composition supports.
`glow`	boolean	`true`	The warm incandescent halo behind the composition.
`fade_out`	boolean	`false`	Fades the bottom edge into the surface underneath.
`isometric`	boolean	`false`	Tilts the composition into the isometric plane of the platform stack.
`theme`	"dark" \| "light"	`"dark"`	`dark` for the site canvas, `light` for the cream reversed surface.
`class`	string	`nil`	Extra classes for the frame.
`rest`	global	`—`	Any other HTML attribute, set on the frame.

Source

Two files. Copy them into your app if you would rather own the code than depend on the library.

lib/eh_visuals/brand/mark.ex

mark.ex

defmodule EHVisuals.Brand.Mark do
  @moduledoc """
  The EmpoweredHouse mark, alone or as the lockup with the wordmark, drawing
  itself in.
  """

  use EHVisuals.Composition,
    name: "brand/mark",
    title: "Mark",
    description:
      "The EmpoweredHouse mark, alone or as the lockup with the wordmark, drawing itself in."

  attr(:wordmark, :boolean,
    default: true,
    doc: "Shows the lockup. When false the mark stands alone."
  )

  attr(:tagline, :any,
    default: "Software shaped to your company",
    doc: "The mono line underneath. `nil` hides it."
  )

  attr(:label, :string, default: "The EmpoweredHouse logo")
  frame_attrs()

  @spec brand_mark(map()) :: Phoenix.LiveView.Rendered.t()
  def brand_mark(assigns) do
    ~H"""
    <.frame name="brand/mark" label={@label} {frame_opts(assigns)}>
      <svg viewBox="0 0 360 180">
        <g class="ehv-h-lift">
          <g :if={@wordmark}>
            <.mark x="26" y="38" size="76" />
            <text
              class="ehv-t-strong ehv-brand-mark__word ehv-a-slide ehv-i-6"
              x="100"
              y="87"
              font-size="31"
            >
              EmpoweredHouse
            </text>
            <text
              :if={@tagline}
              class="ehv-mono ehv-a-fade ehv-i-10"
              x="180"
              y="140"
              font-size="9"
              text-anchor="middle"
            >
              {String.upcase(@tagline)}
            </text>
          </g>
          <g :if={!@wordmark}>
            <.mark x="110" y="6" size="140" />
            <text
              :if={@tagline}
              class="ehv-mono ehv-a-fade ehv-i-10"
              x="180"
              y="160"
              font-size="9"
              text-anchor="middle"
            >
              {String.upcase(@tagline)}
            </text>
          </g>
        </g>
      </svg>
    </.frame>
    """
  end
end

assets/css/brand/mark.css

mark.css

/* brand/mark */
.ehv-brand-mark { --ehv-max-w: 400px; }

.ehv-brand-mark__word { letter-spacing: -0.02em; }

/* The outline draws itself, then the lime core lands and keeps breathing. */
@keyframes ehv-brand-mark-breathe { 50% { transform: scale(0.84); } }

.ehv-brand-mark .ehv-mark__core { transform-box: fill-box; transform-origin: center; }

.ehv--animated.ehv-brand-mark .ehv-mark__frame {
  stroke-dasharray: 1 1;
  animation: ehv-draw 1.1s var(--ehv-ease) backwards;
}
.ehv--animated.ehv-brand-mark .ehv-mark__core {
  animation:
    ehv-pop 500ms var(--ehv-ease) 700ms backwards,
    ehv-brand-mark-breathe 3.2s ease-in-out 1.6s infinite;
}

.ehv--hover.ehv-brand-mark .ehv-mark__core { transition: fill 200ms var(--ehv-ease); }
.ehv--hover.ehv-brand-mark:hover .ehv-mark__core { fill: var(--ehv-ink); }