⌘K
empowered.house ↗

Installation

Four steps for a Phoenix app: the dependency, the stylesheet, the optional trigger script, and one line where you render.

  1. Add the dependency

    In the umbrella, add it to the app that renders the pictures. apps/ui is the natural home, because every brand already depends on it.

    apps/ui/mix.exs 
    defp deps do
  [
    {:eh_visuals,
     git: "git@github.com:EmpoweredHouse/empowered-visual-library.git", tag: "v0.1.0"}
  ]
end

    Then run mix deps.get. Mix compiles a dependency in the :prod environment, so you get the compositions without the docs site.

  2. Import the stylesheet

    Import the index from the brand's app.css, next to the chrome and the fonts. It pulls in the base layer and every composition.

    assets/css/app.css 
    @import "tailwindcss";
@import "../../../ui/assets/css/chrome.css";
@import "../../../ui/assets/css/fonts.css";
/* EmpoweredHouse Visuals, fetched by mix into the umbrella's deps/. */
@import "../../../../deps/eh_visuals/assets/css/eh-visuals.css";

    To ship less CSS, import the base layer and only what a page uses:

    assets/css/app.css 
    @import "../../../../deps/eh_visuals/assets/css/base.css";
@import "../../../../deps/eh_visuals/assets/css/hero/platform-stack.css";
@import "../../../../deps/eh_visuals/assets/css/process/flow.css";

    Vite has to be allowed to read outside the app. Add deps/eh_visuals/assets to server.fs.allow in vite.config.ts, the same way ../../ui/assets is listed today.

  3. Import the trigger script, if you want scroll triggers

    Without the script every animated composition plays on page load. With it, trigger="in-view" waits until the picture is on screen. It is plain DOM code and about 1 KB.

    assets/js/app.ts 
    import "../../../../deps/eh_visuals/assets/js/eh-visuals.js";

  4. Render a composition

    use EHVisuals imports every composition into the module. Each one is a function named {category}_{file}.

    home_sections.ex 
    defmodule EmpoweredLandingWeb.HomeSections do
  use Phoenix.Component
  use EHVisuals

  def platform(assigns) do
    ~H"""
    <div class="h-120 rounded-xl border border-border">
      <.hero_platform_stack animated />
    </div>
    """
  end
end

    To import one composition, import its module: import EHVisuals.Charts.Sparkline.

Tokens and fonts

A composition reads the token names of the landing stylesheet: --canvas, --surface-1, --border-soft, --text-primary, --lime, --coral, --sans, --mono and --ease. On a page that defines none of them it falls back to the brand values, so it looks the same in a blog embed or a deck as on the site.

Prefer to own the code?

Skip the dependency and copy the source. Every preview page shows the two files of its composition with a copy button. You also need the shared layer once:

  • lib/eh_visuals/composition.ex and lib/eh_visuals/frame.ex
  • assets/css/base.css
  • assets/js/eh-visuals.js, only for scroll triggers

Rename the EHVisuals module prefix to your app's and the files are yours. The mark is the one exception: inside the umbrella, keep rendering it through UI.CoreComponents.mark/1, which is its single definition.

Work on the library

terminal 
mix deps.get
mix test                 # every composition, every variation
mix eh_visuals.build     # docs site into _site/, CSS index, skill catalog
mix eh_visuals.serve     # the same, served at http://localhost:4400 and opened