The code below uses an array of customizable prefixes, pronouns, adjectives and mini-phrases to create titles, most of which seem to be dystopian, fantasy and maybe a little bit western.


document.getElementById("title").textContent = generateTitle();

document.getElementById("subtitle").textContent = generateSubtitle();

function generateTitle() {

var name_prefixes = ["Master", "Mr.", "Professor", "Mrs.", "Princess", "Prince", "The Pauper's", "The", "Betsy", "Billy", "Johnny"];

var primary_nouns = ["Crystal", "Bugle", "Dreamer", "Dream", "Castle", "Moss", "Mountain", "Pit", "Bigfoot", "Dream maker", "Oathbreaker", "Bard", "X'arahan'tu", "Magic", "Acorn", "Sun", "Son", "Stump", "Arm"];

var adjectives = ["Lost", "Five", "Faded", "Ancient", "Blackened", "Den of", "Despairing", "Golden", "Many", "Merry", "Clever", "Wonderful", "Sullen", "Angry", "Little", "Cowardly", "Silver", "Lasting", "Heavy", "Festive", "Gleeful", "Enchanted", "Wise", "Wistful", "Dark", "Untold"];

var secondary_nouns = ["Hearts", "Stones", "Diamond Dogs", "Painted Toes", "Songs", "Tales", "Lords", "Promise", "Screams", "Plagues", "Dreams", "Roads", "Curses", "Spells", "Gloam", "Lands", "Marsh", "Hearts", "Rules", "Swamp", "Tale", "Apex", "Beggar"];

var name_prefix = sample(name_prefixes);

var primary_noun = sample(primary_nouns);

var adjective = sample(adjectives);

var secondary_noun = sample(secondary_nouns);

var title = "";

if (Math.random() < 0.5) {

title = `${name_prefix} ${primary_noun} and the ${adjective} ${secondary_noun}`;

} else {

title = `The ${adjective} ${secondary_noun} of ${name_prefix} ${primary_noun}`;


return title;


function generateSubtitle() {

var story_adjectives = ["Forgotten", "Merry", "Clever", "Baleful", "Deep Space", "Whimsical", "Trivial", "Forlorn", "Dank and Faded", "Once in a Lifetime", "Cyborg's", "Hot Mess", "Dark", "Precog's", "Bed Full of", "Tattooed"];

var story_formats = ["Quest", "Novel", "Dream of Ages", "Song", "Crystalized Puzzle", "Legend", "Quest", "Curse", "Tale", "Diaspora", "Whisper of the Heart", "Monster"];

var adjective = sample(story_adjectives);

var format = sample(story_formats);

var subtitle = `A ${adjective} ${format}`;

return subtitle;


function sample(array) {

const index = Math.floor(Math.random() * array.length);

return array[index];


function injectInterface() {

document.body.insertAdjacentHTML('beforeend', `

<style type="text/css">

@import url(',700');

body {

text-align: center;

font-family: 'Roboto', sans-serif;


.wrap {

display: table;

padding: 50px;

margin: 50px auto;

text-align: center;


#title {

font-size: 50px;

font-weight: bold;

text-transform: uppercase;

line-height: .9em;


#subtitle {

margin-top: .75em;

font-weight: 300;

font-size: 25px;

font-weight: normal;



<div class="wrap">

<div id="title">Title</div>

<div id="subtitle">Subtitle</div>