Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/smartComponents/CharacterAvatar/CharacterAvatar.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+
+import { AvatarInfo } from "@dndbeyond/character-rules-engine/es";
+
+import CharacterAvatarPortrait from "./CharacterAvatarPortrait";
+
+interface Props {
+  avatarInfo: AvatarInfo;
+  className: string;
+}
+export default class CharacterAvatar extends React.PureComponent<Props, {}> {
+  static defaultProps = {
+    className: "",
+  };
+
+  render() {
+    const { avatarInfo, className } = this.props;
+
+    const classNames: Array<string> = ["ddbc-character-avatar", className];
+    if (avatarInfo.frameId) {
+      classNames.push(`ddbc-character-avatar--${avatarInfo.frameId}`);
+    }
+    let animatedStyles: React.CSSProperties = {};
+    if (avatarInfo.frameAvatarDecorationKey) {
+      const [name, style, animationUrl] =
+        avatarInfo.frameAvatarDecorationKey.split("|");
+      name && classNames.push(`ddbc-character-avatar--${name}`);
+      style && classNames.push(`ddbc-character-avatar--${style}`);
+      if (animationUrl) {
+        classNames.push(`ddbc-character-avatar--animated`);
+        // NOTE: using the backround key for all of these did not work well so they are separated
+        animatedStyles = {
+          backgroundImage: `url(https://www.dndbeyond.com/attachments/${animationUrl}.png)`,
+          backgroundPositionX: "0px",
+          backgroundPositionY: "0px",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: `1240px 1240px`,
+        };
+      }
+    }
+
+    let frameStyles: React.CSSProperties = {};
+    if (avatarInfo.frameUrl) {
+      frameStyles = {
+        backgroundImage: `url(${avatarInfo.frameUrl})`,
+      };
+    }
+
+    return (
+      <div className={classNames.join(" ")}>
+        <CharacterAvatarPortrait avatarUrl={avatarInfo.avatarUrl} />
+        {avatarInfo.frameId && (
+          <div className={"ddbc-character-avatar__frame"} style={frameStyles} />
+        )}
+        {avatarInfo.frameId && (
+          <div className={"ddbc-character-avatar__frame-extra1"}>
+            <div
+              className="ddbc-character-avatar__frame-extra-content ddbc-character-avatar__frame-extra1-content"
+              style={animatedStyles}
+            />
+          </div>
+        )}
+        {avatarInfo.frameId && (
+          <div className={"ddbc-character-avatar__frame-extra2"}>
+            <div className="ddbc-character-avatar__frame-extra-content ddbc-character-avatar__frame-extra2-content" />
+          </div>
+        )}
+        {avatarInfo.frameId && (
+          <div className={"ddbc-character-avatar__frame-extra3"}>
+            <div className="ddbc-character-avatar__frame-extra-content ddbc-character-avatar__frame-extra3-content" />
+          </div>
+        )}
+      </div>
+    );
+  }
+}

ddb_main/tools/js/smartComponents/CharacterAvatar/CharacterAvatarPortrait/CharacterAvatarPortrait.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLDivElement | HTMLImageElement> {
+  className?: string;
+  avatarUrl: string | null;
+}
+
+const CharacterAvatarPortrait: React.FC<Props> = ({
+  className = "",
+  avatarUrl,
+  ...props
+}) => {
+  let portraitClasses: Array<string> = [
+    "ddbc-character-avatar__portrait",
+    className,
+  ];
+  let portraitStyles: React.CSSProperties = {};
+  if (avatarUrl) {
+    portraitStyles = {
+      backgroundImage: `url(${avatarUrl})`,
+    };
+  } else {
+    portraitClasses.push("ddbc-character-avatar__portrait--none");
+  }
+
+  return avatarUrl ? (
+    <img
+      className={portraitClasses.join(" ")}
+      src={avatarUrl}
+      alt="Character portrait"
+      {...props}
+    />
+  ) : (
+    <div
+      className={portraitClasses.join(" ")}
+      style={portraitStyles}
+      {...props}
+    />
+  );
+};
+
+export default CharacterAvatarPortrait;

ddb_main/tools/js/smartComponents/CharacterAvatar/CharacterAvatarPortrait/index.ts

@@ -0,0 +1,4 @@
+import CharacterAvatarPortrait from "./CharacterAvatarPortrait";
+
+export default CharacterAvatarPortrait;
+export { CharacterAvatarPortrait };

ddb_main/tools/js/smartComponents/CharacterAvatar/index.ts

@@ -0,0 +1,5 @@
+import CharacterAvatar from "./CharacterAvatar";
+import CharacterAvatarPortrait from "./CharacterAvatarPortrait";
+
+export default CharacterAvatar;
+export { CharacterAvatar, CharacterAvatarPortrait };